import { useState } from "react"; import { cn } from "@/lib/utils"; import { Button } from "@/components/ui/button"; import { ChevronRightIcon } from "lucide-react"; interface OnboardingContentProps { onContinue: (data: { role: string; automation: string[] }) => void; } const roles = [ { id: "product-manager", label: "Product Manager" }, { id: "developer", label: "Developer" }, { id: "designer", label: "Designer" }, { id: "ops", label: "Ops" }, { id: "founder", label: "Founder" }, { id: "other", label: "Other" } ]; const automationOptions = [ { id: "data-collection", label: "Data collection & processing" }, { id: "emails", label: "Sending emails or messages" }, { id: "dashboard", label: "Dashboard updates" }, { id: "repetitive-tasks", label: "Repetitive internal tasks" }, { id: "ai-assistant", label: "Building your own AI assistant" }, { id: "other", label: "Other" } ]; export const Content = ({ onContinue }: OnboardingContentProps) => { const [selectedRole, setSelectedRole] = useState("product-manager"); const [selectedAutomation, setSelectedAutomation] = useState([ "data-collection", "repetitive-tasks" ]); const toggleAutomation = (option: string) => { setSelectedAutomation((prev) => prev.includes(option) ? prev.filter((item) => item !== option) : [...prev, option] ); }; const handleContinue = () => { onContinue({ role: selectedRole, automation: selectedAutomation }); }; return (

{/* Header */}

Let's personalize your experience

Tell us a bit about you so we can tailor templates, suggestions, and features to your needs.

{/* Role Selection */}

What best describes your role?

{roles.map((role) => ( ))}

{/* Automation Selection */}

What do you want to automate first?

{automationOptions.map((option) => ( ))}

); };