mirror of
https://github.com/sonr-io/sonr.git
synced 2026-08-03 18:01:39 +00:00
77 lines
2.2 KiB
Templ
77 lines
2.2 KiB
Templ
|
package landing
|
||
|
|
|
||
|
|
import models "github.com/onsonr/sonr/pkg/webapp/models"
|
||
|
|
|
||
|
|
var header = &models.NavHeader{
|
||
|
|
Logo: &models.Image{
|
||
|
|
Src: "https://cdn.sonr.id/logo-ivory.svg",
|
||
|
|
Width: "20",
|
||
|
|
Height: "20",
|
||
|
|
},
|
||
|
|
Primary: &models.NavItem{
|
||
|
|
Text: "Get Access",
|
||
|
|
Href: "/register",
|
||
|
|
},
|
||
|
|
Items: []*models.NavItem{
|
||
|
|
{
|
||
|
|
Text: "Docs",
|
||
|
|
Href: "#",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Text: "Blog",
|
||
|
|
Href: "#",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Text: "Changelog",
|
||
|
|
Href: "#",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
Text: "About",
|
||
|
|
Href: "#",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
}
|
||
|
|
|
||
|
|
templ Header() {
|
||
|
|
<!-- Site header -->
|
||
|
|
<header class="absolute top-2 md:top-6 w-full z-30">
|
||
|
|
<div class="px-4 sm:px-6">
|
||
|
|
<div class="max-w-3xl mx-auto">
|
||
|
|
<div class="flex items-center justify-between h-14 border border-transparent [background:linear-gradient(theme(colors.white),theme(colors.white))_padding-box,linear-gradient(120deg,theme(colors.zinc.300),theme(colors.zinc.100),theme(colors.zinc.300))_border-box] rounded-lg px-3">
|
||
|
|
<!-- Site branding -->
|
||
|
|
<div class="shrink-0 mr-4">
|
||
|
|
<!-- Logo -->
|
||
|
|
<a class="flex items-center justify-center bg-zinc-800 border-zinc-600 border-1 w-8 h-8 rounded shadow-sm shadow-zinc-950/20" href="/">
|
||
|
|
<img src={ header.Logo.Src } width={ header.Logo.Width } height={ header.Logo.Height } alt="Logo"/>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
<!-- Desktop navigation -->
|
||
|
|
<nav class="flex grow">
|
||
|
|
<!-- Desktop sign in links -->
|
||
|
|
<ul class="flex grow justify-end flex-wrap items-center">
|
||
|
|
<ul class="flex grow justify-center items-center">
|
||
|
|
for _, item := range header.Items {
|
||
|
|
<li class="ml-1 px-2">
|
||
|
|
@navButton(item, false)
|
||
|
|
</li>
|
||
|
|
}
|
||
|
|
</ul>
|
||
|
|
<li>
|
||
|
|
@navButton(header.Primary, true)
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</header>
|
||
|
|
}
|
||
|
|
|
||
|
|
templ navButton(item *models.NavItem, isPrimary bool) {
|
||
|
|
if isPrimary {
|
||
|
|
<div class="btn-sm text-zinc-100 cursor-pointer bg-zinc-900 hover:bg-zinc-800 w-full shadow" hx-swap="afterend" hx-get={ item.Href }>{ item.Text }</div>
|
||
|
|
} else {
|
||
|
|
<a class="text-sm cursor-pointer font-medium text-zinc-500 hover:text-zinc-900 px-3 lg:px-5 py-2 flex items-center transition" hx-swap="afterend" href={ templ.URL(item.Href) }>{ item.Text }</a>
|
||
|
|
}
|
||
|
|
}
|