FooterMinimalDark Footer
Donkere versie van minimale footer. Logo, links en copyright op één rij.
src/components/footer/FooterMinimalDark.astro
---
/**
* FooterMinimalDark
* Donkere versie van de minimale footer. Één rij, alles inline.
*/
interface Props {
logo: string;
links?: { label: string; href: string }[];
copyright?: string;
}
const { logo, links = [], copyright } = Astro.props;
---
<footer class="fmd">
<div class="fmd-inner">
<a href="/" class="fmd-logo">{logo}</a>
<nav class="fmd-links">
{links.map(l => <a href={l.href} class="fmd-link">{l.label}</a>)}
</nav>
<p class="fmd-copy">{copyright ?? `© ${new Date().getFullYear()} ${logo}`}</p>
</div>
</footer>
<style>
.fmd { background: #0a0a0a; border-top: 1px solid rgba(255,255,255,0.07); }
.fmd-inner { max-width: 1280px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.fmd-logo { font-weight: 800; font-size: 0.9375rem; color: #fff; text-decoration: none; letter-spacing: -0.02em; }
.fmd-links { display: flex; gap: 1.5rem; flex: 1; flex-wrap: wrap; }
.fmd-link { font-size: 0.8125rem; color: rgba(255,255,255,0.4); text-decoration: none; transition: color 0.15s; }
.fmd-link:hover { color: rgba(255,255,255,0.7); }
.fmd-copy { font-size: 0.8125rem; color: rgba(255,255,255,0.25); margin: 0; white-space: nowrap; }
</style>
Props
| Prop | Type | Default | Beschrijving |
|---|---|---|---|
logo * | string | — | Merknaam |
links | { label: string; href: string }[] | — | Footer links |
copyright | string | — | Copyright tekst |
* = verplicht