Template
43 lines
2.0 KiB
TypeScript
43 lines
2.0 KiB
TypeScript
import Link from 'next/link';
|
|
import { Logo } from '@/components/logo';
|
|
import { ThemeToggle } from '@/components/theme-toggle';
|
|
|
|
export type FooterProps = {
|
|
siteName?: string;
|
|
logoUrl?: string;
|
|
description?: string;
|
|
links?: Array<{ label: string; url: string }>;
|
|
socialLinks?: Array<{ label: string; url: string }>;
|
|
copyright?: string;
|
|
showThemeToggle?: 'yes' | 'no';
|
|
};
|
|
|
|
export default function Footer({
|
|
siteName = 'Your Company', logoUrl = '', description = '', links = [], socialLinks = [], copyright, showThemeToggle = 'yes',
|
|
}: FooterProps) {
|
|
return (
|
|
<footer className="bg-background">
|
|
<div className="section-shell grid gap-10 py-14 md:grid-cols-[1.3fr_1fr] md:py-16">
|
|
<div className="max-w-sm">
|
|
<Logo name={siteName} logoUrl={logoUrl} />
|
|
{description && <p className="mt-4 text-sm leading-6 text-muted-foreground">{description}</p>}
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-8 sm:grid-cols-[1fr_1fr_auto]">
|
|
<nav aria-label="Footer navigation" className="flex flex-col gap-3">
|
|
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Explore</p>
|
|
{links.map((link) => <Link key={`${link.label}-${link.url}`} href={link.url} className="text-sm hover:text-brand">{link.label}</Link>)}
|
|
</nav>
|
|
<nav aria-label="Social links" className="flex flex-col gap-3">
|
|
<p className="text-xs font-medium uppercase tracking-[0.18em] text-muted-foreground">Connect</p>
|
|
{socialLinks.map((link) => <a key={`${link.label}-${link.url}`} href={link.url} className="text-sm hover:text-brand">{link.label}</a>)}
|
|
</nav>
|
|
{showThemeToggle === 'yes' && <div className="col-span-2 sm:col-span-1"><ThemeToggle /></div>}
|
|
</div>
|
|
</div>
|
|
<div className="section-shell py-5 text-xs text-muted-foreground">
|
|
{copyright || `© ${new Date().getFullYear()} ${siteName}. All rights reserved.`}
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|