troylusty.com/src/components/Footer.astro

61 lines
1.8 KiB
Text

---
import { SITE } from "@consts";
import Link from "@components/Link.astro";
import { Icon } from "astro-icon/components";
---
<footer class="mt-auto">
<div class="mx-auto w-full max-w-screen-lg p-4 py-6 lg:py-8">
<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">
<div>
<ul class="font-medium text-tertiary">
{
SITE.NAVLINKS.map((i) => (
<li class="mb-4 last:mb-0">
<a
data-navlink
href={i.href}
class="capitalize hover:text-secondary"
>
{i.name}
</a>
</li>
))
}
</ul>
</div>
</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="hover:text-secondary">{SITE.TITLE}</a>. All Rights
Reserved.
</span>
<div class="mt-4 flex gap-5 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 hover:text-secondary"
/>
</Link>
))
}
</div>
</div>
</div>
</footer>