// Client/Server Component // "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Welcome 01 * @description A simple welcome screen with greeting and quick actions. * Perfect for first-time user onboarding. * * @slots welcome, welcome-container, welcome-header, welcome-icon, * welcome-heading, welcome-description, welcome-actions, * welcome-action-card, welcome-action-icon, welcome-action-title, * welcome-action-description, welcome-cta * @variant simple * * @registryDependencies button-link button card * @dependencies lucide-react */ import * as React from "react" import { ButtonLink } from "@/registry/ui/button-link" import { Card, CardContent } from "@/registry/ui/card" import { ArrowRight, Sparkles, BookOpen, Users, Zap } from "lucide-react" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface QuickAction { /** Unique identifier for list keys */ id: string /** Icon component */ icon: React.ComponentType<{ className?: string; "aria-hidden"?: boolean | "true" | "false"; focusable?: "true" | "false" }> /** Action title */ title: string /** Action description */ description: string /** Action link */ href: string } interface Welcome01Props { /** User's name for personalized greeting */ userName?: string /** Main heading */ heading?: string /** Description text */ description?: string /** Quick action cards */ actions?: QuickAction[] /** Primary CTA */ primaryAction?: { label: string; href: string } /** Additional CSS classes */ className?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultActions: QuickAction[] = [ { id: "docs", icon: BookOpen, title: "Read the docs", description: "Learn the basics and get started quickly", href: "#", }, { id: "team", icon: Users, title: "Invite your team", description: "Collaborate with your teammates", href: "#", }, { id: "setup", icon: Zap, title: "Quick setup", description: "Configure your workspace in minutes", href: "#", }, ] // ============================================================================ // COMPONENT // ============================================================================ function Welcome01({ userName = "there", heading = "Welcome aboard!", description = "We're excited to have you here. Let's get you started with a few quick steps.", actions = defaultActions, primaryAction = { label: "Get Started", href: "#" }, className, }: Welcome01Props) { return (

{/* Header */}

Hey {userName}, {heading}

{description}

{/* Quick Actions */}

{actions.map((action) => (

{action.title}

{action.description}

))}

{/* Primary CTA */}

{primaryAction.label}

) } export default Welcome01 export { Welcome01, type Welcome01Props, type QuickAction }