feat: Adds styleguide, working on result view container.
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import Elementary
|
||||
import Styleguide
|
||||
|
||||
struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
|
||||
let title = "HVAC-Toolbox"
|
||||
@@ -33,36 +34,36 @@ struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
|
||||
main(.class("bg-white dark:bg-gray-800")) {
|
||||
div(.class("min-h-screen")) {
|
||||
Header()
|
||||
inner()
|
||||
PageContent(body: inner)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
struct Header: HTML {
|
||||
private struct Header: HTML {
|
||||
|
||||
var content: some HTML {
|
||||
header(.class("bg-blue-500 mb-8 flex flex-row gap-2 border-b border-yellow-300")) {
|
||||
header(.class("\(bg: .blue) mb-8 flex flex-row gap-2 border \(border: .yellow)")) {
|
||||
a(
|
||||
.href(route: .index),
|
||||
.class("flex flex-row gap-2 bg-yellow-300 pe-2 rounded-e-lg text-blue-500 [&:hover]:text-blue-600")
|
||||
.class("flex flex-row gap-2 \(bg: .yellow) pe-2 rounded-e-lg \(text: .blue) hover:\(text: .darkBlue)")
|
||||
) {
|
||||
img(.src("/images/toolbox.svg"), .width(40), .height(40), .class("py-1"))
|
||||
div(.class("flex flex-row mt-2")) {
|
||||
h2(.class("text-2xl font-extrabold")) { "HVAC-Toolbox" }
|
||||
SVG.wind
|
||||
h2(.class("text-2xl font-extrabold pe-3")) { "HVAC-Toolbox" }
|
||||
SVG(.wind, color: .blue)
|
||||
}
|
||||
}
|
||||
nav(.class("flex flex-row gap-2 p-2 mt-2")) {
|
||||
// TODO: Add class active, to button that is the active route.
|
||||
ul(.class("flex flex-wrap gap-x-2 lg:gap-x-5 text-yellow-300 font-bold")) {
|
||||
ul(.class("flex flex-wrap gap-x-2 lg:gap-x-5 \(text: .yellow) font-bold")) {
|
||||
li {
|
||||
a(.href(route: .moldRisk(.index)), .class("[&:hover]:border-b border-yellow-300")) {
|
||||
a(.href(route: .moldRisk(.index)), .class("hover:border-b \(border: .yellow)")) {
|
||||
"Mold-Risk"
|
||||
}
|
||||
}
|
||||
li {
|
||||
a(.href("#"), .class("[&:hover]:border-b border-yellow-300")) {
|
||||
a(.href("#"), .class("[&:hover]:border-b \(border: .yellow)")) {
|
||||
"Dehumidifier-Sizing"
|
||||
}
|
||||
}
|
||||
@@ -72,4 +73,16 @@ struct Header: HTML {
|
||||
}
|
||||
}
|
||||
|
||||
private struct PageContent<Body: HTML>: HTML where Body: Sendable {
|
||||
let body: () -> Body
|
||||
|
||||
var content: some HTML {
|
||||
div(.class("mx-5 lg:mx-20")) {
|
||||
div(.class("rounded-xl shadow-lg \(bg: .slate) dark:\(bg: .darkSlate) p-8")) {
|
||||
body()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
protocol SendableHTMLDocument: HTMLDocument, Sendable {}
|
||||
|
||||
Reference in New Issue
Block a user