// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Footer 03 * @description A centered stack footer with vertical layout. * Centered logo, horizontal nav links, social icons, and copyright. * * @slots footer, footer-container, footer-brand, footer-brand-logo, * footer-brand-name, footer-nav, footer-nav-link, footer-social-links, * footer-social-link, footer-copyright * @variant centered * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Github, Linkedin, Instagram } from "lucide-react" import { FaXTwitter } from "react-icons/fa6" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface FooterLink { /** Unique identifier */ id: string /** Link text */ label: string /** Link destination */ href: string } interface SocialLink { /** Unique identifier */ 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 Footer03Props { /** Company/brand name */ brandName?: string /** Brand logo URL (optional) */ brandLogo?: string /** Footer links */ links?: FooterLink[] /** Social media links */ socialLinks?: SocialLink[] /** Copyright text */ copyright?: string /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultLinks: FooterLink[] = [ { id: "link-1", label: "Features", href: "#" }, { id: "link-2", label: "Pricing", href: "#" }, { id: "link-3", label: "About", href: "#" }, { id: "link-4", label: "Blog", href: "#" }, { id: "link-5", label: "Contact", href: "#" }, ] const defaultSocialLinks: SocialLink[] = [ { id: "social-1", name: "GitHub", href: "#", icon: Github }, { id: "social-2", name: "X", href: "#", icon: FaXTwitter }, { id: "social-3", name: "LinkedIn", href: "#", icon: Linkedin }, { id: "social-4", name: "Instagram", href: "#", icon: Instagram }, ] // ============================================================================ // COMPONENT // ============================================================================ function Footer03({ brandName = "Acme", brandLogo, links = defaultLinks, socialLinks = defaultSocialLinks, copyright = `© ${new Date().getFullYear()} Acme Inc. All rights reserved.`, className, }: Footer03Props) { return ( ) } export default Footer03 export { Footer03, type Footer03Props, type FooterLink, type SocialLink }