129 lines
2.9 KiB
Plaintext
129 lines
2.9 KiB
Plaintext
package baseview
|
|
|
|
type FooterItem struct {
|
|
Name string
|
|
Href string
|
|
}
|
|
|
|
// Specify the links to show in the footer
|
|
func getFooterItems() []FooterItem {
|
|
return []FooterItem{
|
|
{Name: "About", Href: "/about"},
|
|
}
|
|
}
|
|
|
|
// Returns the template fragment for the Footer
|
|
templ Footer() {
|
|
<footer class="bg-mantle mt-10">
|
|
<div class="relative mx-auto max-w-screen-xl px-4 py-8 sm:px-6 lg:px-8">
|
|
@backToTopButton()
|
|
<div class="lg:flex lg:items-end lg:justify-between">
|
|
@footerBranding()
|
|
@footerLinks(getFooterItems())
|
|
</div>
|
|
<div class="lg:flex lg:items-end lg:justify-between">
|
|
@footerCopyright()
|
|
@themeSelector()
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
}
|
|
|
|
templ backToTopButton() {
|
|
<div class="absolute end-4 top-4 sm:end-6 lg:end-8">
|
|
<a
|
|
class="inline-block rounded-full bg-teal p-2 text-crust
|
|
shadow-sm transition hover:bg-teal/75"
|
|
href="#main-content"
|
|
>
|
|
<span class="sr-only">Back to top</span>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="size-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293
|
|
3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4
|
|
4a1 1 0 010 1.414z"
|
|
clip-rule="evenodd"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
}
|
|
|
|
templ footerBranding() {
|
|
<div>
|
|
<div class="flex justify-center text-text lg:justify-start">
|
|
<span class="text-2xl">OSL Stats</span>
|
|
</div>
|
|
<p class="mx-auto max-w-md text-center leading-relaxed text-subtext0">
|
|
placeholder text
|
|
</p>
|
|
</div>
|
|
}
|
|
|
|
templ footerLinks(items []FooterItem) {
|
|
<ul
|
|
class="mt-12 flex flex-wrap justify-center gap-6 md:gap-8
|
|
lg:mt-0 lg:justify-end lg:gap-12"
|
|
>
|
|
for _, item := range items {
|
|
<li>
|
|
<a
|
|
class="transition hover:text-subtext1"
|
|
href={ templ.SafeURL(item.Href) }
|
|
>
|
|
{ item.Name }
|
|
</a>
|
|
</li>
|
|
}
|
|
</ul>
|
|
}
|
|
|
|
templ footerCopyright() {
|
|
<div>
|
|
<p class="mt-4 text-center text-sm text-overlay0">
|
|
by Haelnorr | placeholder text
|
|
</p>
|
|
</div>
|
|
}
|
|
|
|
templ themeSelector() {
|
|
<div>
|
|
<div class="mt-2 text-center">
|
|
<label for="theme-select" class="hidden lg:inline">Theme</label>
|
|
<select
|
|
name="ThemeSelect"
|
|
id="theme-select"
|
|
class="mt-1.5 inline rounded-lg bg-surface0 p-2 w-fit"
|
|
x-model="theme"
|
|
>
|
|
<template
|
|
x-for="themeopt in [
|
|
'dark',
|
|
'light',
|
|
'system',
|
|
]"
|
|
>
|
|
<option
|
|
x-text="displayThemeName(themeopt)"
|
|
:value="themeopt"
|
|
:selected="theme === themeopt"
|
|
></option>
|
|
</template>
|
|
</select>
|
|
<script>
|
|
const displayThemeName = (value) => {
|
|
if (value === "dark") return "Dark (Mocha)";
|
|
if (value === "light") return "Light (Latte)";
|
|
if (value === "system") return "System";
|
|
};
|
|
</script>
|
|
</div>
|
|
</div>
|
|
}
|