// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Footer 01 * @description A comprehensive footer with multiple link columns, * social links, and copyright. Standard layout for marketing sites. * * @slots footer, footer-container, footer-brand, footer-brand-name, * footer-brand-description, footer-social-links, footer-social-link, * footer-columns, footer-column, footer-column-title, footer-column-links, * footer-column-link, footer-copyright * @variant multi-column * * @registryDependencies * @dependencies lucide-react react-icons */ import * as React from "react" import { Github, Linkedin, Youtube } from "lucide-react" import { FaXTwitter } from "react-icons/fa6" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface FooterLink { /** Unique identifier for list keys */ id: string /** Link text */ label: string /** Link destination */ href: string } interface FooterColumn { /** Unique identifier for list keys */ id: string /** Column title */ title: string /** Links in this column */ links: FooterLink[] } interface SocialLink { /** Unique identifier for list keys */ id: string /** Platform name */ name: string /** Link destination */ href: string /** Icon component */ icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean | "true" | "false"; focusable?: "true" | "false" }> } interface Footer01Props { /** Company/brand name */ brandName?: string /** Brand description */ brandDescription?: string /** Footer link columns */ columns?: FooterColumn[] /** Social media links */ socialLinks?: SocialLink[] /** Copyright text */ copyright?: string /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultColumns: FooterColumn[] = [ { id: "product", title: "Product", links: [ { id: "features", label: "Features", href: "#" }, { id: "pricing", label: "Pricing", href: "#" }, { id: "changelog", label: "Changelog", href: "#" }, { id: "documentation", label: "Documentation", href: "#" }, ], }, { id: "company", title: "Company", links: [ { id: "about", label: "About", href: "#" }, { id: "blog", label: "Blog", href: "#" }, { id: "careers", label: "Careers", href: "#" }, { id: "contact", label: "Contact", href: "#" }, ], }, { id: "resources", title: "Resources", links: [ { id: "community", label: "Community", href: "#" }, { id: "help-center", label: "Help Center", href: "#" }, { id: "partners", label: "Partners", href: "#" }, { id: "status", label: "Status", href: "#" }, ], }, { id: "legal", title: "Legal", links: [ { id: "privacy", label: "Privacy", href: "#" }, { id: "terms", label: "Terms", href: "#" }, { id: "cookie-policy", label: "Cookie Policy", href: "#" }, { id: "licenses", label: "Licenses", href: "#" }, ], }, ] const defaultSocialLinks: SocialLink[] = [ { id: "github", name: "GitHub", href: "#", icon: Github }, { id: "x", name: "X", href: "#", icon: FaXTwitter }, { id: "linkedin", name: "LinkedIn", href: "#", icon: Linkedin }, { id: "youtube", name: "YouTube", href: "#", icon: Youtube }, ] // ============================================================================ // COMPONENT // ============================================================================ function Footer01({ brandName = "Acme Inc", brandDescription = "Building the future of web development with modern tools and best practices.", columns = defaultColumns, socialLinks = defaultSocialLinks, copyright = `© ${new Date().getFullYear()} Acme Inc. All rights reserved.`, className, }: Footer01Props) { return ( ) } export default Footer01 export { Footer01, type Footer01Props, type FooterLink, type FooterColumn, type SocialLink }