ui/layout.templ

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>
}