71 lines
1.9 KiB
TypeScript
71 lines
1.9 KiB
TypeScript
type FooterLink = {
|
|
label: string;
|
|
href?: string;
|
|
onClick?: () => void;
|
|
};
|
|
|
|
type FooterColumn = {
|
|
title: string;
|
|
items: FooterLink[];
|
|
};
|
|
|
|
const FooterSimpleCard = ({
|
|
brand,
|
|
columns,
|
|
copyright,
|
|
links,
|
|
}: {
|
|
brand: string;
|
|
columns: FooterColumn[];
|
|
copyright: string;
|
|
links: FooterLink[];
|
|
}) => {
|
|
return (
|
|
<footer
|
|
data-webild-section="FooterSimpleCard"
|
|
aria-label="Site footer"
|
|
className="w-full py-20"
|
|
>
|
|
<div className="w-content-width mx-auto p-8 rounded-theme card">
|
|
<div className="flex flex-col md:flex-row gap-8 md:gap-0 justify-between items-start mb-8">
|
|
<h2 className="text-4xl font-medium">{brand}</h2>
|
|
|
|
<div className="w-full md:w-fit flex flex-wrap gap-y-8 md:gap-8">
|
|
{columns.map((column) => (
|
|
<div key={column.title} className="w-1/2 md:w-auto flex flex-col items-start gap-3">
|
|
<h3 className="text-sm opacity-50">{column.title}</h3>
|
|
{column.items.map((item) => (
|
|
<a
|
|
key={item.label}
|
|
href={item.href}
|
|
className="text-base hover:opacity-75 transition-opacity"
|
|
>
|
|
{item.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between pt-8 border-t border-foreground/20">
|
|
<span className="text-sm opacity-50">{copyright}</span>
|
|
<div className="flex items-center gap-3">
|
|
{links.map((link) => (
|
|
<a
|
|
key={link.label}
|
|
href={link.href}
|
|
className="text-sm opacity-50 hover:opacity-75 transition-opacity"
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|
|
|
|
export default FooterSimpleCard;
|