52 lines
2.2 KiB
Text
52 lines
2.2 KiB
Text
|
---
|
||
|
|
import Icon from "./Icon.astro";
|
||
|
|
import { SITE, categories } from "../lib/blog-data.js";
|
||
|
|
|
||
|
|
const { flush = false } = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<footer class:list={[flush ? "mt-0" : "mt-24", "border-t border-border/60"]}>
|
||
|
|
<div class="mx-auto grid max-w-6xl gap-10 px-5 py-12 md:grid-cols-4">
|
||
|
|
<div class="md:col-span-2">
|
||
|
|
<div class="font-serif text-lg font-semibold">{SITE.name}</div>
|
||
|
|
<p class="mt-3 max-w-sm text-sm leading-relaxed text-muted-foreground">
|
||
|
|
{SITE.description}
|
||
|
|
</p>
|
||
|
|
<div class="mt-4 flex items-center gap-3 text-muted-foreground">
|
||
|
|
<a href="/rss.xml" aria-label="RSS" class="hover:text-foreground"><Icon name="rss" class="h-4 w-4" /></a>
|
||
|
|
<a href="https://x.com/hicarlosarias" aria-label="Comiida on X" class="hover:text-foreground"><Icon name="twitter" class="h-4 w-4" /></a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">Sections</div>
|
||
|
|
<ul class="mt-3 space-y-2 text-sm">
|
||
|
|
{
|
||
|
|
categories.slice(0, 5).map((category) => (
|
||
|
|
<li>
|
||
|
|
<a href={`/categories/${category.slug}`} class="text-foreground/80 hover:text-foreground">
|
||
|
|
{category.name}
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
))
|
||
|
|
}
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="text-xs font-medium uppercase tracking-wider text-muted-foreground">The site</div>
|
||
|
|
<ul class="mt-3 space-y-2 text-sm">
|
||
|
|
<li><a href="/about" class="hover:text-foreground">About</a></li>
|
||
|
|
<li><a href="/faq" class="hover:text-foreground">FAQ</a></li>
|
||
|
|
<li><a href="/contact" class="hover:text-foreground">Contact</a></li>
|
||
|
|
<li><a href="/blog" class="hover:text-foreground">Archive</a></li>
|
||
|
|
<li><a href="/rss.xml" class="hover:text-foreground">RSS feed</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="border-t border-border/60">
|
||
|
|
<div class="mx-auto flex max-w-6xl flex-col items-start justify-between gap-2 px-5 py-5 text-xs text-muted-foreground sm:flex-row sm:items-center">
|
||
|
|
<div>© {new Date().getFullYear()} {SITE.name}. Dining in Medellín.</div>
|
||
|
|
<div>Set in Fraunces & Inter.</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</footer>
|