"use client"; import { useId, useState } from "react"; import type { HTMLAttributes, ReactNode } from "react"; export type FooterLink = { label: string; href: string; external?: boolean }; export type FooterGroup = { title: string; links: FooterLink[] }; export type SitemapFooterProps = Omit, "children"> & { brand: ReactNode; tagline?: ReactNode; groups: FooterGroup[]; legalLinks?: FooterLink[]; year: number; holder: string; aside?: ReactNode; headingLevel?: 2 | 3 | 4; }; const ring = "outline-none focus-visible:ring-2 focus-visible:ring-[#1F4E79] focus-visible:ring-offset-2 focus-visible:ring-offset-[#F7F8F9] dark:focus-visible:ring-[#8CB6E0] dark:focus-visible:ring-offset-[#0C1218]"; function FooterAnchor({ link }: { link: FooterLink }) { return ( {link.label} {link.external ? ( <> (opens in a new tab) ) : null} ); } export function SitemapFooter({ brand, tagline, groups, legalLinks = [], year, holder, aside, headingLevel = 2, className = "", ...props }: SitemapFooterProps) { const baseId = useId(); const [open, setOpen] = useState([]); const Heading = ("h" + headingLevel) as "h2" | "h3" | "h4"; const toggle = (title: string) => setOpen((current) => (current.includes(title) ? current.filter((item) => item !== title) : [...current, title])); return ( ); }