// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Features 01 * @description A feature grid with icons and descriptions in a 3-column layout. * Great for highlighting product capabilities and key benefits. * * @slots features, features-container, features-header, features-badge, * features-heading, features-description, features-grid, * features-item, features-icon-wrapper, features-item-title, * features-item-description * @variant grid * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Zap, Shield, Globe, Sparkles, Clock, Users, type LucideIcon, } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface FeatureItem { /** Unique identifier for list key */ id: string /** Feature name/title */ name: string /** Feature description */ description: string /** Lucide icon component */ icon: LucideIcon } interface Features01Props { /** Badge text displayed above heading */ badge?: string /** Main section heading */ heading?: string /** Section description */ description?: string /** Array of features to display */ features?: FeatureItem[] /** Number of columns (2 or 3) */ columns?: 2 | 3 /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultFeatures: FeatureItem[] = [ { id: "fast", name: "Lightning Fast", description: "Optimized for performance with lazy loading and code splitting built-in.", icon: Zap, }, { id: "secure", name: "Secure by Default", description: "Built-in security best practices to keep your data safe and protected.", icon: Shield, }, { id: "global", name: "Global CDN", description: "Content delivered from edge locations around the world for low latency.", icon: Globe, }, { id: "ai", name: "AI Powered", description: "Intelligent features powered by cutting-edge machine learning models.", icon: Sparkles, }, { id: "realtime", name: "Real-time Updates", description: "See changes instantly with live synchronization across all devices.", icon: Clock, }, { id: "collaboration", name: "Team Collaboration", description: "Work together seamlessly with your entire team in real-time.", icon: Users, }, ] // ============================================================================ // VARIANT LOOKUPS // ============================================================================ const gridCols = { 2: "grid-cols-1 md:grid-cols-2", 3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3", } as const // ============================================================================ // COMPONENT // ============================================================================ function Features01({ badge = "Features", heading = "Everything you need to build modern apps", description = "All the tools you need to build, deploy, and scale your applications with confidence.", features = defaultFeatures, columns = 3, className, idBase, }: Features01Props) { const headingId = `${idBase ?? "features-01"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Feature Grid */}

{feature.name}: {feature.description}

) } export default Features01 export { Features01, type Features01Props, type FeatureItem }