popui.go/breadcrumb.templ at main · invopop/popui.go · GitHub

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
64
65
66
67
68
69
70
71
72
package popui

import (
	"github.com/invopop/icons"
	"github.com/invopop/popui.go/props"
	"github.com/invopop/popui.go/tailwind"
)

// Breadcrumbs provides a navigation breadcrumb wrapper.
templ Breadcrumbs(opts ...props.Breadcrumbs) {
	{{ p := props.First(opts) }}
	<ul
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			tailwind.Merge(
				"flex items-center gap-3 [&>li:last-child>span:last-child]:hidden",
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		{ children... }
	</ul>
}

// Breadcrumb provides an individual breadcrumb item.
// Renders as a link if Href is provided, otherwise as plain text.
// The last item is styled with medium font weight and darker color.
templ Breadcrumb(opts ...props.Breadcrumb) {
	{{ p := props.First(opts) }}
	<li
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			tailwind.Merge(
			"flex items-center gap-3",
			p.Class,
			),
		}
	>
		if p.Href != "" {
			<a
				href={ p.Href }
				class="font-sans text-lg leading-6 tracking-[-0.16px] whitespace-nowrap text-foreground-default-secondary font-normal hover:text-foreground"
				{ p.Attributes... }
			>
				if p.Label != "" {
					{ p.Label }
				} else {
					{ children... }
				}
			</a>
		} else {
			<span
				class="font-sans text-lg leading-6 tracking-[-0.16px] whitespace-nowrap text-foreground font-medium"
				{ p.Attributes... }
			>
				if p.Label != "" {
					{ p.Label }
				} else {
					{ children... }
				}
			</span>
		}
		<span class="text-icon-default-secondary">
			@icons.Slash()
		</span>
	</li>
}