// Client/Server Component "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Features 03 * @description A tabbed feature section where users can switch between * feature groups. Great for products with many features. * * @slots features, features-container, features-header, features-badge, * features-heading, features-description, features-tabs, * features-tab-content, features-tab-image, features-tab-heading, * features-tab-description, features-tab-list * @variant tabbed * * @registryDependencies button badge * @dependencies lucide-react */ import * as React from "react" import { Zap, Shield, BarChart3, Settings, type LucideIcon, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Button } from "@/registry/ui/button" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface Feature { /** Unique identifier for list key */ id: string /** Feature name */ name: string /** Feature description */ description: string } interface FeatureTab { /** Tab ID */ id: string /** Tab label */ label: string /** Tab icon */ icon: LucideIcon /** Tab heading */ heading: string /** Tab description */ description: string /** Tab image */ image?: string /** Features list */ features: Feature[] } interface Features03Props { /** Section badge */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Feature tabs */ tabs?: FeatureTab[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultTabs: FeatureTab[] = [ { id: "performance", label: "Performance", icon: Zap, heading: "Lightning fast performance", description: "Built for speed with optimized code and intelligent caching.", image: "/assets/placeholders/placeholder-3x2.svg", features: [ { id: "edge-caching", name: "Edge caching", description: "Global CDN with 99.99% uptime" }, { id: "prefetching", name: "Smart prefetching", description: "Predictive resource loading" }, { id: "code-splitting", name: "Code splitting", description: "Load only what you need" }, ], }, { id: "security", label: "Security", icon: Shield, heading: "Enterprise-grade security", description: "Your data is protected with industry-leading security measures.", image: "/assets/placeholders/placeholder-3x2.svg", features: [ { id: "encryption", name: "End-to-end encryption", description: "AES-256 encryption at rest" }, { id: "soc2", name: "SOC 2 compliant", description: "Audited annually" }, { id: "sso", name: "SSO & SAML", description: "Enterprise authentication" }, ], }, { id: "analytics", label: "Analytics", icon: BarChart3, heading: "Powerful analytics", description: "Get actionable insights with comprehensive analytics.", image: "/assets/placeholders/placeholder-3x2.svg", features: [ { id: "dashboards", name: "Real-time dashboards", description: "Live data visualization" }, { id: "reports", name: "Custom reports", description: "Build your own metrics" }, { id: "export", name: "Export options", description: "CSV, PDF, and API access" }, ], }, { id: "integrations", label: "Integrations", icon: Settings, heading: "Seamless integrations", description: "Connect with your favorite tools and services.", image: "/assets/placeholders/placeholder-3x2.svg", features: [ { id: "integrations-count", name: "500+ integrations", description: "Connect to any tool" }, { id: "api", name: "API access", description: "Build custom integrations" }, { id: "webhooks", name: "Webhooks", description: "Real-time event notifications" }, ], }, ] // ============================================================================ // COMPONENT // ============================================================================ function Features03({ badge = "Features", heading = "Everything you need", description = "Powerful features to help you build, deploy, and scale your applications.", tabs = defaultTabs, className, idBase, }: Features03Props) { const [activeTab, setActiveTab] = React.useState(tabs[0]?.id || "") const headingId = `${idBase ?? "features-03"}-heading` const activeTabData = tabs.find((tab) => tab.id === activeTab) return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Tabs */}

{tabs.map((tab) => ( ))}

{/* Tab Content */} {activeTabData && (

{/* Image */}

{activeTabData.image && ( {activeTabData.heading}

)}

{/* Content */}

{activeTabData.heading}

{activeTabData.description}

{/* Features List */}

{feature.name}

{feature.description}

)}

) } export default Features03 export { Features03, type Features03Props, type FeatureTab, type Feature }