sonr/internal/nebula/layout/grid.templ

package layout

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

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