Footer 2

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