Footer 3

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