troylusty.com/src/components/Footer.astro
2025-01-17 22:09:54 +00:00

57 lines
1.7 KiB
Text

---
import { SITE } from "@consts";
import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components";
---
<footer class="mx-auto mb-8 mt-auto w-full max-w-prose space-y-6 pt-12">
<div class="md:flex md:justify-between">
<div class="mb-6 text-secondary md:mb-0">
<a class="inline-flex items-center" href="#top" title="Back to top">
<Icon name="icon" title={SITE.TITLE} class="h-8 w-auto ease-in-out" />
<div
class="ml-2 hidden flex-none text-sm font-bold capitalize md:visible lg:block"
>
Troy Lusty
</div>
</a>
</div>
<div class="text-left sm:gap-6 md:text-right">
<ul class="font-medium text-tertiary">
{
SITE.NAVLINKS.map((i) => (
<li class="mb-1 last:mb-0">
<a
data-navlink
href={i.href}
class="capitalize transition-colors hover:text-secondary"
>
{i.name}
</a>
</li>
))
}
</ul>
</div>
</div>
<div class="mt-12 sm:flex sm:items-center sm:justify-between lg:mt-16">
<span class="text-sm text-tertiary sm:text-center"
>&copy; {new Date().getFullYear()}
<a href="/" class="transition-colors hover:text-secondary">{SITE.TITLE}</a
>. All Rights Reserved.
</span>
<div class="mt-4 flex gap-2 sm:mt-0 sm:justify-center">
{
SITE.LINKS.map((i) => (
<Link href={i.href}>
<Icon
name={i.icon}
title={i.name}
class="h-5 w-5 text-tertiary transition-colors hover:text-secondary"
/>
</Link>
))
}
</div>
</div>
</footer>