// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Download 01 * @description A simple app download section with platform buttons for * iOS and Android. Clean centered layout with phone mockup. * * @slots download, download-container, download-content, download-heading, * download-description, download-buttons, download-appstore-btn, * download-playstore-btn, download-stats, download-stat, download-mockup, * download-mockup-image * @variant app-store * * @registryDependencies button-link button * @dependencies lucide-react */ import * as React from "react" import { Star } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface AppStoreConfig { /** Unique identifier for list key */ id: string /** Store name */ name: string /** Icon component */ icon: React.ReactNode /** Label above store name */ label: string /** Store rating */ rating: string /** Link to store */ href: string } interface StatConfig { /** Unique identifier for list key */ id: string /** Stat value */ value: string /** Stat label */ label: string } interface Download01Props { /** Badge text */ badge?: string /** Main heading text */ heading?: string /** Supporting description paragraph */ description?: string /** App store buttons */ stores?: AppStoreConfig[] /** Stats displayed below content */ stats?: StatConfig[] /** Screen image for phone mockup */ screenImage?: string /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STORES: AppStoreConfig[] = [ { id: "store-apple", name: "App Store", icon: ( ), label: "Download on the", rating: "4.9", href: "#", }, { id: "store-google", name: "Google Play", icon: ( ), label: "Get it on", rating: "4.8", href: "#", }, ] const DEFAULT_STATS: StatConfig[] = [ { id: "stat-downloads", value: "2M+", label: "Downloads" }, { id: "stat-rating", value: "4.9", label: "Rating" }, { id: "stat-countries", value: "150+", label: "Countries" }, ] // ============================================================================ // COMPONENT // ============================================================================ function Download01({ badge = "Now Available", heading = "Your life, organized", description = "The all-in-one app that helps you manage tasks, track habits, and achieve your goals. Simple, beautiful, and incredibly powerful.", stores = DEFAULT_STORES, stats = DEFAULT_STATS, screenImage = "/assets/placeholders/placeholder-9x16.svg", className, idBase, }: Download01Props) { const headingId = `${idBase ?? "download-01"}-heading` return (

{/* Content */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)} {/* App Store Buttons */}

{stores.map((store) => ( {store.icon}

{store.label}

{store.name}

))}

{/* Stats */}

{stats.map((stat) => (

{stat.value}

{stat.label}

))}

{/* Phone Mockup */}

{/* Notch */}

) } export default Download01 export { Download01, type Download01Props, type AppStoreConfig, type StatConfig }