// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Footer 06 * @description An e-commerce footer with payment methods and trust badges. * Includes payment icons, security badges, app download links, and shop links. * * @slots footer, footer-container, footer-content, footer-main, footer-brand, * footer-brand-name, footer-brand-description, footer-app-links, footer-app-link, * footer-columns, footer-column, footer-column-title, footer-column-links, * footer-link, footer-trust, footer-trust-title, footer-trust-badges, * footer-trust-badge, footer-bottom, footer-payment, footer-payment-title, * footer-payment-methods, footer-payment-method, footer-copyright, * footer-legal-links, footer-legal-link * @variant ecommerce * * @registryDependencies * @dependencies lucide-react */ import * as React from "react" import { ShieldCheck, Truck, RotateCcw, CreditCard } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // PLATFORM ICONS (inline SVGs from /public/brands/, optimized for currentColor) // ============================================================================ const AppleIcon = ({ className }: { className?: string }) => ( ) const GooglePlayIcon = ({ className }: { className?: string }) => ( ) // ============================================================================ // TYPES // ============================================================================ interface FooterLinkConfig { id: string label: string href: string } interface FooterColumnConfig { id: string title: string links: FooterLinkConfig[] } interface AppLinkConfig { id: string name: string href: string store: string iconType: "apple" | "google" } interface TrustBadgeConfig { id: string iconType: "shield" | "truck" | "rotate" | "credit" label: string } interface PaymentMethodConfig { id: string name: string display: string } interface Footer06Props { brandName?: string brandDescription?: string appLinks?: AppLinkConfig[] columns?: FooterColumnConfig[] trustBadges?: TrustBadgeConfig[] paymentMethods?: PaymentMethodConfig[] legalLinks?: FooterLinkConfig[] copyright?: string className?: string idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultAppLinks: AppLinkConfig[] = [ { id: "app-1", name: "iOS", href: "#", store: "App Store", iconType: "apple" }, { id: "app-2", name: "Android", href: "#", store: "Google Play", iconType: "google" }, ] const defaultColumns: FooterColumnConfig[] = [ { id: "col-1", title: "Shop", links: [ { id: "link-1", label: "New Arrivals", href: "#" }, { id: "link-2", label: "Best Sellers", href: "#" }, { id: "link-3", label: "Sale", href: "#" }, { id: "link-4", label: "Gift Cards", href: "#" }, ], }, { id: "col-2", title: "Help", links: [ { id: "link-5", label: "Track Order", href: "#" }, { id: "link-6", label: "Shipping Info", href: "#" }, { id: "link-7", label: "Returns", href: "#" }, { id: "link-8", label: "FAQs", href: "#" }, ], }, { id: "col-3", title: "Company", links: [ { id: "link-9", label: "About Us", href: "#" }, { id: "link-10", label: "Stores", href: "#" }, { id: "link-11", label: "Careers", href: "#" }, { id: "link-12", label: "Press", href: "#" }, ], }, ] const defaultTrustBadges: TrustBadgeConfig[] = [ { id: "badge-1", iconType: "shield", label: "Secure Checkout" }, { id: "badge-2", iconType: "truck", label: "Free Shipping" }, { id: "badge-3", iconType: "rotate", label: "Easy Returns" }, { id: "badge-4", iconType: "credit", label: "Safe Payment" }, ] const defaultPaymentMethods: PaymentMethodConfig[] = [ { id: "pay-1", name: "Visa", display: "VISA" }, { id: "pay-2", name: "Mastercard", display: "MC" }, { id: "pay-3", name: "American Express", display: "AMEX" }, { id: "pay-4", name: "PayPal", display: "PayPal" }, { id: "pay-5", name: "Apple Pay", display: "Apple Pay" }, { id: "pay-6", name: "Google Pay", display: "GPay" }, ] const defaultLegalLinks: FooterLinkConfig[] = [ { id: "legal-1", label: "Privacy Policy", href: "#" }, { id: "legal-2", label: "Terms of Service", href: "#" }, { id: "legal-3", label: "Cookie Settings", href: "#" }, { id: "legal-4", label: "Accessibility", href: "#" }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const trustIconMap = { shield: ShieldCheck, truck: Truck, rotate: RotateCcw, credit: CreditCard, } // ============================================================================ // COMPONENT // ============================================================================ function Footer06({ brandName = "Acme Store", brandDescription = "Quality products delivered to your door. Shop with confidence.", appLinks = defaultAppLinks, columns = defaultColumns, trustBadges = defaultTrustBadges, paymentMethods = defaultPaymentMethods, legalLinks = defaultLegalLinks, copyright = `© ${new Date().getFullYear()} Acme Store. All rights reserved.`, className, idBase = "footer-06", }: Footer06Props) { const headingId = `${idBase}-heading` return ( ) } export default Footer06 export { Footer06, type Footer06Props }