Footer 5

1"use client";
2 
3import Image from "next/image";
4import Link from "next/link";
5import { type ComponentPropsWithRef } from "react";
6import type { Footer_5_Block, Media } from "~/payload-types";
7import SocialIcon from "@/registry/default/lib/fields/socialLinks";
8import { cn } from "@/registry/default/utils";
9 
10export * from "./config";
11 
12export default function Footer_5({
13	brandLogo,
14	copyright,
15	links,
16	socialLinks,
17	className,
18	...divProps
19}: Footer_5_Block & ComponentPropsWithRef<"div">) {
20	return (
21		<footer
22			className={cn("border-b bg-white pt-20 dark:bg-transparent", className)}
23			{...divProps}
24		>
25			<div className="mb-8 border-b md:mb-12">
26				<div className="mx-auto flex max-w-5xl flex-wrap items-end justify-between gap-6 px-6 pb-6">
27					{brandLogo && (
28						<Link href="/" aria-label="go home" className="block size-fit">
29							<Image
30								src={(brandLogo as Media).url!}
31								alt={(brandLogo as Media).alt}
32								width={200}
33								height={150}
34							/>
35						</Link>
36					)}
37					<div className="flex flex-wrap justify-center gap-6 text-sm">
38						{socialLinks.map((icon, index) => (
39							<SocialIcon icon={icon.icon} href={icon.href} key={`${index}`} />
40						))}
41					</div>
42				</div>
43			</div>
44			<div className="mx-auto max-w-5xl px-6">
45				<div className="grid gap-12 md:grid-cols-5 md:gap-0 lg:grid-cols-4">
46					<div className="grid grid-cols-2 gap-6 sm:grid-cols-4 md:col-span-5 md:row-start-1 lg:col-span-3">
47						{links?.map((link, index) => (
48							<div key={index} className="space-y-4 text-sm">
49								<span className="block font-medium">{link.group}</span>
50								{link.items?.map((item, index) => (
51									<Link
52										key={index}
53										href={item.href}
54										className="text-muted-foreground hover:text-primary block duration-150"
55									>
56										<span>{item.label}</span>
57									</Link>
58								))}
59							</div>
60						))}
61					</div>
62				</div>
63				{copyright ? (
64					<div className="bg-muted mt-16 flex items-center justify-between rounded-md p-4 px-6 py-3">
65						<small className="text-muted-foreground order-last block text-center text-sm md:order-first">
66							{`© ${new Date().getFullYear()} ${copyright?.copyright ?? ""}`}
67						</small>
68						<div className="flex">
69							{copyright?.actions?.map((action, index) => {
70								if (!action.label || !action.href) return null;
71 
72								return (
73									<Link key={`${index}-${action.label}`} href={action.href}>
74										{action.label}
75									</Link>
76// … truncated