1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
|
package html
import (
. "go.alanpearce.eu/gomponents"
. "go.alanpearce.eu/gomponents/components"
. "go.alanpearce.eu/gomponents/html"
)
func page(title string, children ...Node) Node {
return HTML5(HTML5Props{
Title: title,
Language: "en",
Head: []Node{
Script(Src("https://cdn.tailwindcss.com?plugins=typography")),
},
Body: []Node{Class("bg-gradient-to-b from-white to-indigo-100 bg-no-repeat"),
Div(Class("min-h-screen flex flex-col justify-between"),
header(),
Div(Class("grow"),
container(true,
Div(Class("prose prose-lg prose-indigo"),
Group(children),
),
),
),
footer(),
),
},
})
}
func header() Node {
return Div(Class("bg-indigo-600 text-white shadow"),
container(false,
Div(Class("flex items-center space-x-4 h-8"),
headerLink("/", "Home"),
headerLink("/about", "About"),
),
),
)
}
func headerLink(href, text string) Node {
return A(Class("hover:text-indigo-300"), Href(href), Text(text))
}
func container(padY bool, children ...Node) Node {
return Div(
Classes{
"max-w-7xl mx-auto": true,
"px-4 md:px-8 lg:px-16": true,
"py-4 md:py-8": padY,
},
Group(children),
)
}
func footer() Node {
return Div(
Class("bg-gray-900 text-white shadow text-center h-16 flex items-center justify-center"),
A(Href("https://www.gomponents.com"), Text("gomponents")),
)
}
|