63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import ButtonTextUnderline from "@/components/button/ButtonTextUnderline";
|
|
import { cls } from "@/lib/utils";
|
|
|
|
export interface FooterColumn {
|
|
title: string;
|
|
items: Array<{
|
|
label: string;
|
|
href?: string;
|
|
onClick?: () => void;
|
|
}>;
|
|
}
|
|
|
|
interface FooterColumnsProps {
|
|
columns: FooterColumn[];
|
|
className?: string;
|
|
columnClassName?: string;
|
|
columnTitleClassName?: string;
|
|
columnItemClassName?: string;
|
|
}
|
|
|
|
const FooterColumns = memo<FooterColumnsProps>(function FooterColumns({
|
|
columns,
|
|
className = "",
|
|
columnClassName = "",
|
|
columnTitleClassName = "",
|
|
columnItemClassName = "",
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cls("w-full md:w-fit flex flex-wrap gap-y-[var(--width-10)] md:gap-[calc(var(--width-10)/1.5)]", className)}
|
|
>
|
|
{columns.map((column) => (
|
|
<div
|
|
key={column.title}
|
|
className={cls("relative z-1 w-1/2 md:w-auto flex items-start flex-col gap-4", columnClassName)}
|
|
>
|
|
<h3
|
|
className={cls("text-sm text-accent/75", columnTitleClassName)}
|
|
>
|
|
{column.title}
|
|
</h3>
|
|
{column.items.map((item) => (
|
|
<ButtonTextUnderline
|
|
key={item.label}
|
|
text={item.label}
|
|
href={item.href}
|
|
onClick={item.onClick}
|
|
className={cls("text-base text-foreground", columnItemClassName)}
|
|
/>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
FooterColumns.displayName = "FooterColumns";
|
|
|
|
export default FooterColumns;
|