Initial commit

src/components/shared/FooterColumns.tsx

@@ -0,0 +1,62 @@
+"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;