Files
musenalm/views/routes/components/_alphabet.gohtml
2025-02-18 23:44:04 +01:00

49 lines
1.5 KiB
Plaintext

{{ $model := . }}
{{ if $model.letters }}
<div class="flex flex-row border-b px-3 border-zinc-300 items-end min-h-14">
<div id="alphabet" class="alphabet flex flex-row items-end" hx-swap-oob="true" hx-boost="false">
{{ range $id, $r := .letters }}
<a
class="odd:bg-stone-100 even:bg-zinc-100 mr-1 border-zinc-300 border-x border-t [&>a[aria-current='page']]:font-bold
px-2 no-underline transition-all duration-75
{{ if not $model.active -}}inactive{{- end -}}"
href="?letter={{ $r }}"
{{ if eq $model.active $r }}aria-current="page"{{ end }}
hx-get="./?letter={{ $r }}"
hx-push-url="true"
hx-select="#searchcontent"
hx-target="#searchcontent"
>{{ $r }}</a
>
{{ end }}
</div>
<div class="flex-grow"></div>
<div>
<i class="ri-search-line"></i><i class="-ml-0.5 inline-block ri-arrow-right-s-line"></i>
<input
class="px-1.5 py-0.5 font-serif italic"
type="search"
name="search"
placeholder="Suchbegriff eingeben"
hx-get="./"
hx-trigger="input changed delay:=200ms, keyup[key=='Enter']"
hx-select="#searchcontent"
hx-target="#searchcontent"
autocomplete="off" />
</div>
<div id="permalink" class="font-serif ml-3 py-1" hx-swap-oob="true">
{{ if $model.search }}
<a
href="/reihen?search={{ $model.search }}"
class="inline-block px-1
text-white no-underline bg-stone-700 hover:bg-stone-900 rounded">
<i class="ri-links-line"></i
></a>
{{ end }}
</div>
</div>
{{ end }}