Footer 1

1"use client";
2 
3import Image from "next/image";
4import Link from "next/link";
5import { type ComponentPropsWithRef } from "react";
6import type { Footer_1_Block, Media } from "~/payload-types";
7import SocialIcon from "@/registry/default/lib/fields/socialLinks";
8 
9export default function Footer_1({
10	brandLogo,
11	links,
12	socialLinks,
13	copyright,
14	...divProps
15}: Footer_1_Block & ComponentPropsWithRef<"div">) {
16	return (
17		<footer {...divProps}>
18			<div className="mx-auto max-w-5xl px-6 py-8 md:py-16">
19				<Link href="/" aria-label="go home" className="mx-auto block size-fit">
20					{brandLogo && (
21						<Image
22							src={(brandLogo as Media).url!}
23							alt={(brandLogo as Media).alt}
24							width={200}
25							height={150}
26						/>
27					)}
28				</Link>
29 
30				<div className="flex flex-wrap justify-center gap-6 text-sm">
31					{(links ?? []).map((link, index) => (
32						<Link
33							key={index}
34							href={link.href}
35							className="text-muted-foreground hover:text-primary block duration-150"
36						>
37							<span>{link.label}</span>
38						</Link>
39					))}
40				</div>
41				<div className="my-8 flex flex-wrap justify-center gap-6 text-sm">
42					{socialLinks.map((icon, index) => (
43						<SocialIcon icon={icon.icon} href={icon.href} key={`${index}`} />
44					))}
45				</div>
46				<span className="text-muted-foreground block text-center text-sm">
47					{" "}
48					© {new Date().getFullYear()} {copyright}
49				</span>
50			</div>
51		</footer>
52	);
53}