// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Footer 02 * @description A minimal footer with simple 2-column layout. * Brand and links on left, social icons on right. Compact design for SaaS apps. * * @slots footer, footer-container, footer-left, footer-brand, footer-nav, * footer-nav-link, footer-right, footer-social-links, footer-social-link, * footer-copyright * @variant minimal * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { Github, Linkedin } 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 Footer02Props { /** Company/brand name */ brandName?: 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: "Privacy", href: "#" }, { id: "link-2", label: "Terms", href: "#" }, { id: "link-3", 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 }, ] // ============================================================================ // COMPONENT // ============================================================================ function Footer02({ brandName = "Acme", links = defaultLinks, socialLinks = defaultSocialLinks, copyright = `© ${new Date().getFullYear()} Acme Inc.`, className, }: Footer02Props) { return ( ) } export default Footer02 export { Footer02, type Footer02Props, type FooterLink, type SocialLink }