FooterMinimal Footer
Strakke één-rij footer: logo links, links in het midden, copyright rechts.
src/components/footer/FooterMinimal.astro
---
/**
* FooterMinimal — strakke één-rij footer: logo links, links in het midden,
* copyright rechts. Lichte achtergrond.
*
* Props:
* - logo?: string
* - logoHref?: string
* - links?: { label: string; href: string }[]
* - copyright?: string (default: "© {jaar}")
*/
interface Props {
logo?: string;
logoHref?: string;
links?: { label: string; href: string }[];
copyright?: string;
}
const {
logo = 'Merk',
logoHref = '/',
links = [
{ label: 'Privacy', href: '#' },
{ label: 'Voorwaarden', href: '#' },
{ label: 'Contact', href: '#' },
],
copyright,
} = Astro.props;
const year = new Date().getFullYear();
const copyrightText = copyright ?? `© ${year}`;
---
<footer class="bl-section fmin">
<div class="bl-inner fmin-inner">
<a href={logoHref} class="fmin-logo">{logo}</a>
{links.length > 0 && (
<nav class="fmin-links">
{links.map(l => <a href={l.href} class="fmin-link">{l.label}</a>)}
</nav>
)}
<p class="fmin-copy">{copyrightText}</p>
</div>
</footer>
<style>
.fmin{background:#fff;border-top:1px solid #e5e7eb;padding-block:0}
.fmin-inner{padding-block:1.25rem;display:flex;align-items:center;gap:2rem;flex-wrap:wrap}
.fmin-logo{font-weight:800;font-size:.9375rem;color:#0a0a0a;text-decoration:none;letter-spacing:-.02em}
.fmin-links{display:flex;gap:1.5rem;flex:1;flex-wrap:wrap}
.fmin-link{font-size:.8125rem;color:#6b7280;text-decoration:none;transition:color .15s}
.fmin-link:hover{color:#0a0a0a}
.fmin-copy{font-size:.8125rem;color:#6b7280;margin:0;white-space:nowrap}
</style>
Props
| Prop | Type | Default | Beschrijving |
|---|---|---|---|
logo | string | 'Merk' | Merknaam |
logoHref | string | '/' | Link van het logo |
links | { label; href }[] | - | Footer links |
copyright | string | '© {jaar}' | Copyright-regel |
* = verplicht