// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Features 09 * @description A workflow/process features section showing steps in a * connected timeline format. Perfect for onboarding or how-it-works sections. * * @slots features, features-container, features-header, features-badge, * features-heading, features-description, features-timeline, * features-step, features-step-connector, features-step-number, * features-step-content, features-step-icon, features-step-title, * features-step-text, features-step-image * @variant timeline-process * * @registryDependencies badge * @dependencies lucide-react */ import * as React from "react" import { Upload, Settings, Rocket, TrendingUp } from "lucide-react" import { cn } from "@/registry/lib/utils" import { Badge } from "@/registry/ui/badge" // ============================================================================ // TYPES // ============================================================================ interface ProcessStepConfig { /** Unique identifier for list key */ id: string /** Step number (auto-generated if not provided) */ number?: number /** Icon component */ icon: React.ReactNode /** Step title */ title: string /** Step description */ description: string /** Optional image */ image?: { src: string alt: string } } interface Features09Props { /** Badge text */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Process steps */ steps?: ProcessStepConfig[] /** Additional CSS classes */ className?: string /** Multi-instance safety: base for generating DOM ids */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const DEFAULT_STEPS: ProcessStepConfig[] = [ { id: "step-connect", icon: , title: "Connect Your Repository", description: "Link your GitHub, GitLab, or Bitbucket repository with a single click. We support all major version control platforms.", image: { src: "/assets/placeholders/placeholder-16x9.svg", alt: "Connect repository", }, }, { id: "step-configure", icon: , title: "Configure Your Build", description: "Our intelligent system auto-detects your framework and suggests optimal build settings. Customize as needed.", image: { src: "/assets/placeholders/placeholder-16x9.svg", alt: "Configure build", }, }, { id: "step-deploy", icon: , title: "Deploy Instantly", description: "Push to deploy. Every commit triggers an automatic build and deployment to our global edge network.", image: { src: "/assets/placeholders/placeholder-16x9.svg", alt: "Deploy application", }, }, { id: "step-monitor", icon: , title: "Monitor & Scale", description: "Track performance in real-time with built-in analytics. Scale automatically as your traffic grows.", image: { src: "/assets/placeholders/placeholder-16x9.svg", alt: "Monitor performance", }, }, ] // ============================================================================ // COMPONENT // ============================================================================ function Features09({ badge = "How It Works", heading = "Get started in minutes", description = "Follow these simple steps to go from code to production. No complex configuration required.", steps = DEFAULT_STEPS, className, idBase, }: Features09Props) { const headingId = `${idBase ?? "features-09"}-heading` return (

{/* Header */}

{badge && ( {badge} )}

{heading}

{description && (

{description}

)}

{/* Timeline */}

{steps.map((step, index) => { const stepNumber = step.number ?? index + 1 const isLast = index === steps.length - 1 const isEven = index % 2 === 0 return (

{/* Connector Line (not on last item) */} {!isLast && (

)} {/* Content */}

{/* Step Number */}

{stepNumber}

{/* Text Content */}

{/* Icon */}

{step.icon}

{step.title}

{step.description}

{/* Image */} {step.image && (

)}

) })}

) } export default Features09 export { Features09, type Features09Props, type ProcessStepConfig }