"use client" /** * @name Footer 04 * @description Footer with newsletter signup form and link columns. * Includes email subscription form and social links. * * @slots footer, footer-container, footer-content, footer-newsletter, * footer-newsletter-title, footer-newsletter-description, footer-newsletter-form, * footer-newsletter-input, footer-newsletter-submit, footer-columns, * footer-column, footer-column-title, footer-column-links, footer-link, * footer-bottom, footer-brand, footer-copyright, footer-social, footer-social-link * @variant newsletter * * @registryDependencies button input * @dependencies lucide-react */ import * as React from "react" import { Github, Twitter, Linkedin, Instagram, Send } from "lucide-react" import { Button } from "@/registry/ui/button" import { Input } from "@/registry/ui/input" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface FooterLinkConfig { id: string label: string href: string } interface FooterColumnConfig { id: string title: string links: FooterLinkConfig[] } interface SocialLinkConfig { id: string name: string href: string iconType: "github" | "twitter" | "linkedin" | "instagram" } interface Footer04Props { brandName?: string newsletterTitle?: string newsletterDescription?: string columns?: FooterColumnConfig[] socialLinks?: SocialLinkConfig[] onNewsletterSubmit?: (email: string) => void className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultColumns: FooterColumnConfig[] = [ { id: "col-1", title: "Product", links: [ { id: "link-1", label: "Features", href: "#" }, { id: "link-2", label: "Pricing", href: "#" }, { id: "link-3", label: "Changelog", href: "#" }, ], }, { id: "col-2", title: "Company", links: [ { id: "link-4", label: "About", href: "#" }, { id: "link-5", label: "Blog", href: "#" }, { id: "link-6", label: "Careers", href: "#" }, ], }, { id: "col-3", title: "Support", links: [ { id: "link-7", label: "Help Center", href: "#" }, { id: "link-8", label: "Contact", href: "#" }, { id: "link-9", label: "Status", href: "#" }, ], }, ] const defaultSocialLinks: SocialLinkConfig[] = [ { id: "social-1", name: "GitHub", href: "#", iconType: "github" }, { id: "social-2", name: "X/Twitter", href: "#", iconType: "twitter" }, { id: "social-3", name: "LinkedIn", href: "#", iconType: "linkedin" }, { id: "social-4", name: "Instagram", href: "#", iconType: "instagram" }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const iconMap = { github: Github, twitter: Twitter, linkedin: Linkedin, instagram: Instagram, } // ============================================================================ // COMPONENT // ============================================================================ function Footer04({ brandName = "Acme", newsletterTitle = "Subscribe to our newsletter", newsletterDescription = "Get the latest updates, articles, and resources delivered to your inbox weekly.", columns = defaultColumns, socialLinks = defaultSocialLinks, onNewsletterSubmit, className, idBase = "footer-04", }: Footer04Props) { const headingId = `${idBase}-heading` const [email, setEmail] = React.useState("") const handleSubmit = (e: React.FormEvent) => { e.preventDefault() onNewsletterSubmit?.(email) setEmail("") } return ( ) } export default Footer04 export { Footer04, type Footer04Props }