mirror of
https://github.com/cf-sonr/radar.git
synced 2026-01-12 02:59:13 +00:00
114 lines
2.8 KiB
Plaintext
114 lines
2.8 KiB
Plaintext
|
package ui
|
||
|
|
|
||
|
|
// Body is a component that renders the body tag
|
||
|
|
templ Body() {
|
||
|
|
<body>
|
||
|
|
{ children... }
|
||
|
|
</body>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Head is a component that renders the head of the document
|
||
|
|
templ Head() {
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8"/>
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
|
|
@ApexCharts()
|
||
|
|
@Helia()
|
||
|
|
@Dexie()
|
||
|
|
@Htmx()
|
||
|
|
@Tailwind()
|
||
|
|
@Shoelace()
|
||
|
|
@DefaultStyles()
|
||
|
|
{ children... }
|
||
|
|
</head>
|
||
|
|
}
|
||
|
|
|
||
|
|
// HTML is a component that renders the html tag
|
||
|
|
templ HTML() {
|
||
|
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
{ children... }
|
||
|
|
</html>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Columns is a component that renders a responsive flex container that stacks on mobile
|
||
|
|
templ Columns() {
|
||
|
|
<div class="flex flex-col h-full w-full gap-4 md:gap-6 md:flex-row md:flex-wrap">
|
||
|
|
{ children... }
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Container is a component that renders a full screen container
|
||
|
|
templ Container() {
|
||
|
|
<div id="container" class="flex fixed inset-0 z-[99] w-screen min-h-screen">
|
||
|
|
<div class="relative flex flex-wrap items-center w-full min-h-full px-4 py-6 sm:px-6 md:px-8">
|
||
|
|
<div class="relative w-full max-w-screen-lg mx-auto">
|
||
|
|
<div class="flex flex-col items-center justify-center min-h-full gap-4">
|
||
|
|
{ children... }
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Tailwind css dependencies
|
||
|
|
templ Tailwind() {
|
||
|
|
@tailwindHandle.Once() {
|
||
|
|
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Nav is a component that renders the navigation bar
|
||
|
|
templ Nav() {
|
||
|
|
<nav class="absolute inset-x-0 top-0 z-[100] flex h-16 w-full items-center justify-between px-4 py-4 sm:px-6 md:px-8">
|
||
|
|
{ children... }
|
||
|
|
</nav>
|
||
|
|
}
|
||
|
|
|
||
|
|
// NavCTA is a component that renders a call to action button
|
||
|
|
templ NavCTA(href string, text string) {
|
||
|
|
<sl-button type="primary" href={ href }>{ text }</sl-button>
|
||
|
|
}
|
||
|
|
|
||
|
|
// NavItem is a component that renders a navigation item
|
||
|
|
templ NavItem(href string, text string) {
|
||
|
|
<sl-button type="text" href={ href }>{ text }</sl-button>
|
||
|
|
}
|
||
|
|
|
||
|
|
// NavLogo is a component that renders a logo
|
||
|
|
templ NavLogo(title string) {
|
||
|
|
<a href="/" class="flex items-center justify-center gap-1.5 px-2 py-2">
|
||
|
|
{ children... }
|
||
|
|
<span class="text-xl font-bold pb-1.5">{ title }</span>
|
||
|
|
</a>
|
||
|
|
}
|
||
|
|
|
||
|
|
// NavLeft is a component that renders the left side of the navigation bar
|
||
|
|
templ NavLeft() {
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
{ children... }
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
templ NavRight() {
|
||
|
|
<div class="flex items-center gap-4">
|
||
|
|
{ children... }
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
// Rows is a component that renders a responsive flex container that wraps on mobile
|
||
|
|
templ Rows() {
|
||
|
|
<div class="flex flex-col w-full gap-3 sm:flex-row sm:flex-wrap sm:gap-4">
|
||
|
|
{ children... }
|
||
|
|
</div>
|
||
|
|
}
|
||
|
|
|
||
|
|
templ Separator(text string) {
|
||
|
|
<div class="relative py-6">
|
||
|
|
<div class="absolute inset-0 flex items-center"><span class="w-full border-t"></span></div>
|
||
|
|
<div class="relative flex justify-center text-xs uppercase">
|
||
|
|
<span class="px-2 text-neutral-500">{ text }</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
}
|