bin/views/components/components.templ

package components

import (
	"github.com/alecthomas/chroma/lexers"
	"git.myrkvi.com/myrkvi/bin/models"
)

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 
			tabindex="0"
			role="button" 
			class="transition ease-in-out
				   m-2 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 GetButton(label, to, target, swap string) {
	<span
		tabindex="0"
		role="button" 
		class="transition ease-in-out
				m-2
				px-1 outline outline-1 
				outline-slate-600 hover:outline-2 
				hover:bg-green-300 duration-300
				active:bg-green-600
				foucs:outline-2"
		hx-get={ to }
		if target != "" {
			hx-target={ target }
		}
		if swap != "" {
			hx-swap={ swap }
		}
	>
		{ label }
	</span>
}

templ SubmitFormButton(label string) {
	<input
		type="submit"
		value={ label }
		class="transition ease-in-out
			   m-2 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 []models.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="px-2 sm:px-0 sm:mx-2 sm:my-2
						 border-t-0 border-r-4 
						 sm:border-t-4 sm:border-r-0 
						 border-black cursor-pointer">
				<b>{ item.Label }</b>
			</span>
		} else {
			<a 
				class="px-2 sm:px-0 sm:mx-2 my-2 
					   border-t-0 border-r-4
					   sm:border-t-4 sm:border-r-0
					   border-amber-300"
				href={ templ.URL(item.Href) }
			>
				{ item.Label }
			</a>
		}
	}
	</nav>
}

templ CombineTempls(comps ...templ.Component) {
	for _, comp := range comps {
		{! comp }
	}
}

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

templ ToastSuccess(message string) {
	<div
		class="relative px-4 py-2 bg-emerald-400 opacity-0
				border border-emerald-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>
}

templ SwapOOB(swapspec string, component templ.Component) {
	<div hx-swap-oob={ swapspec }>
		{! component }
	</div>
}

templ SetTitle(title string) {
	<title id="title" hx-swap-oob="true">
		if title == "" {
			bin
		} else {
			{ title } - bin
		}
	</title>
}