// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Download 03 * @description A browser extension download section with browser icons. * Shows availability across different browsers with install buttons. * * @slots download, download-container, download-content, download-badge, * download-heading, download-description, download-features, * download-feature-item, download-browsers, download-browser-card, * download-browser-icon, download-browser-name, download-browser-users, * download-browser-cta * @variant browser-extension * * @registryDependencies button-link button badge * @dependencies lucide-react */ import * as React from "react" import { CheckCircle2 } from "lucide-react" import { Button } from "@/registry/ui/button" import { ButtonLink } from "@/registry/ui/button-link" import { Badge } from "@/registry/ui/badge" import { cn } from "@/registry/lib/utils" // ============================================================================ // PLATFORM ICONS (inline SVGs from /public/brands/, optimized for currentColor) // ============================================================================ const ChromeIcon = ({ className }: { className?: string }) => ( ) const SafariIcon = ({ className }: { className?: string }) => ( ) const EdgeIcon = ({ className }: { className?: string }) => ( ) const DiaIcon = ({ className }: { className?: string }) => ( ) // ============================================================================ // TYPES // ============================================================================ interface BrowserDownload { /** Unique identifier */ id: string /** Browser name */ name: string /** Browser icon */ icon: React.ComponentType<{ className?: string "aria-hidden"?: boolean | "true" | "false" focusable?: "true" | "false" }> /** Download URL */ href: string /** User count or rating */ users?: string /** Is available */ available?: boolean } interface Download03Props { /** Section heading */ heading?: string /** Section description */ description?: string /** Browser downloads */ browsers?: BrowserDownload[] /** Features list */ features?: string[] /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultBrowsers: BrowserDownload[] = [ { id: "browser-1", name: "Chrome", icon: ChromeIcon, href: "#", users: "100K+ users", available: true, }, { id: "browser-2", name: "Dia Browser", icon: DiaIcon, href: "#", users: "50K+ users", available: true, }, { id: "browser-3", name: "Safari", icon: SafariIcon, href: "#", users: "25K+ users", available: true, }, { id: "browser-4", name: "Edge", icon: EdgeIcon, href: "#", users: "30K+ users", available: true, }, ] const defaultFeatures = [ "One-click save to your library", "Sync across all devices", "Offline access support", "Privacy-focused design", ] // ============================================================================ // COMPONENT // ============================================================================ function Download03({ heading = "Get the Browser Extension", description = "Save content from anywhere on the web with our browser extension. Available for all major browsers.", browsers = defaultBrowsers, features = defaultFeatures, className, }: Download03Props) { return (

{/* Content */}

Browser Extension

{heading}

{description}

{/* Features */}

{/* Browser Grid */}

{browsers.map((browser) => (

{browser.name}

{browser.users && (

{browser.users}

)} {browser.available ? ( Install ) : ( )}

))}

) } export default Download03 export { Download03, type Download03Props, type BrowserDownload }