// "use client" // uncomment when required for: hooks, event handlers, browser APIs /** * @name Welcome 07 * @description Role-based welcome with personalized paths. * Users select their role for customized onboarding. * * @slots welcome, welcome-container, welcome-header, welcome-badge, * welcome-heading, welcome-description, welcome-roles, * welcome-role, welcome-role-icon, welcome-role-title, * welcome-role-description, welcome-role-action, welcome-footer, * welcome-footer-text * @variant role-selection * * @registryDependencies badge button * @dependencies lucide-react */ import * as React from "react" import { Code, Paintbrush, BarChart3, Megaphone, ArrowRight, } from "lucide-react" import { Badge } from "@/registry/ui/badge" import { Button } from "@/registry/ui/button" import { cn } from "@/registry/lib/utils" // ============================================================================ // TYPES // ============================================================================ interface Role { id: string /** Role icon */ icon: React.ReactNode /** Role title */ title: string /** Role description */ description: string /** Action label */ actionLabel: string } interface Welcome07Props { /** Section badge */ badge?: string /** Section heading */ heading?: string /** Section description */ description?: string /** Roles list */ roles?: Role[] /** Footer text */ footerText?: string /** Additional CSS classes */ className?: string /** Base ID for multi-instance safety */ idBase?: string } // ============================================================================ // DEFAULT DATA // ============================================================================ const defaultRoles: Role[] = [ { id: "role-1", icon:

,
    title: "Developer",
    description: "Build and integrate with our powerful APIs and SDKs.",
    actionLabel: "Start building",
  },
  {
    id: "role-2",
    icon: ,
    title: "Designer",
    description: "Create stunning visuals with our design tools and templates.",
    actionLabel: "Start designing",
  },
  {
    id: "role-3",
    icon: ,
    title: "Analyst",
    description: "Explore data insights with advanced analytics and reporting.",
    actionLabel: "Start analyzing",
  },
  {
    id: "role-4",
    icon: ,
    title: "Marketer",
    description: "Launch campaigns and track performance across channels.",
    actionLabel: "Start marketing",
  },
]

// ============================================================================
// COMPONENT
// ============================================================================

function Welcome07({
  badge = "Get Started",
  heading = "What describes you best?",
  description = "Select your role to get a personalized onboarding experience tailored to your needs.",
  roles = defaultRoles,
  footerText = "Not sure? You can always change this later in settings.",
  className,
  idBase = "welcome-07",
}: Welcome07Props) {
  const headingId = `${idBase}-heading`

  return (
    
      
        {/* Header */}
        
          {badge && (
            
              {badge}
            
          )}
          
            {heading}
          
          {description && (
            
              {description}
            
          )}
        

        {/* Roles Grid */}
        
          {roles.map((role) => (
            
              
                {role.icon}
              
              
                {role.title}
              
              
                {role.description}
              
              
            
          ))}
        

        {/* Footer */}
        {footerText && (
          
            
              {footerText}
            
          
        )}
      
    
  )
}

export default Welcome07
export { Welcome07, type Welcome07Props }