bin/components.templ

package main

import "github.com/alecthomas/chroma/lexers"

func getLanguages() []string {
	names := lexers.Names(false)
	names = append([]string{"Determine from source"}, names...)

	return names
}

templ chooseSyntax(name string) {
	<select class="max-w-full bg-amber-50" name={ name } id={ name }>
		for i, lang := range getLanguages() {
			if i == 0 {
				<option value="">{ lang }</option>
			} else {
				<option>{ lang }</option>
			}
		}
	</select>
}

templ fileUpload(text, name, id string) {
	<span>
		<label
			role="button"
			for={ id }
			class="transition ease-in-out
				px-1 outline outline-1 
				outline-slate-600 hover:outline-2 
				hover:bg-green-300 duration-300 mx-2
				active:bg-green-600
				focus:outline-2"
				
		>
			{ text }
		</label>
		<span class="mx-2" id={ id + "-span" }>No file chosen</span>
		<input
			type="file"
			name={ name }
			id={ id }
			hidden 
			_={ `on change
				set text to #` + id + `-span
				then log me.files
				then log text
				then if me.files.length > 0
					put me.files[0].name into text's innerText
				else
					put 'No file chosen' into text's innerText
				end` }
		/>
	</span>
}

templ boostButton(label, to string) {
	<span hx-boost="true">
		<a 
			role="button" 
			class="transition ease-in-out
				   px-1 outline outline-1 
				   outline-slate-600 hover:outline-2 
				   hover:bg-green-300 duration-300
				   active:bg-green-600
				   foucs:outline-2"
			href={ templ.SafeURL(to) }
		>
			{ label }
		</a>
	</span>
}

templ submitFormButton(label string) {
	<input
		type="submit"
		value={ label }
		class="transition ease-in-out
			   px-1 outline outline-1 
			   outline-slate-600 hover:outline-2 
			   hover:bg-green-300 duration-300
			   active:bg-green-600
			   focus:outline-2
			   hover:cursor-pointer"
	/>
}

templ NavMenu(items []MenuItem, current int, swapOob bool) {
	<nav
		id="page-nav"
		class="flex flex-col sm:flex-row justify-around"
		if swapOob {
			hx-swap-oob="true"
		}
		hx-boost="true">
	for i, item := range items {
		if i == current {
			<span class="mx-4 md:mx-2 my-2 current-page border-t-4 border-black cursor-pointer">
				<b>{ item.label }</b>
			</span>
		} else {
			<a 
				class="mx-4 sm:mx-2 my-2 border-t-4 border-amber-300"
				href={ templ.URL(item.href) }
			>
				{ item.label }
			</a>
		}
	}
	</nav>
}

templ CombineTempls(top, bottom templ.Component) {
	{! top }
	{! bottom }
}

templ ErrorMessage(msg, id string) {
	<div
		id={ id }
		hx-swap-oob="true"
		class="my-4 text-rose-600"
	>
		{ msg }
	</div>
}

templ ToastError(message string) {
	<div 
		class="relative px-4 py-2 bg-rose-400 opacity-0
				border border-rose-600 rounded-lg m-1"
		_="init transition my opacity to 1 over 250ms"
	>
		<span
			tabindex="0"
			role="button" aria-label="Close the toast message"
			class="absolute top-0 right-1 cursor-pointer select-none"
			_="on click set prnt to my parentElement
			   then transition element prnt's opacity to 0 over 500ms
			   then remove my parentElement"
		>
			<sup>&#x1F7AC;</sup>
		</span>
		{ message }
	</div>
}