auth-12

1"use client";
2 
3import {
4  BuildingIcon,
5  CheckIcon,
6  ChevronRight,
7  SparklesIcon,
8  UserIcon,
9} from "lucide-react";
10import { useState } from "react";
11import { LogoIcon } from "@/components/logo";
12import { Button } from "@/components/ui/button";
13import { Input } from "@/components/ui/input";
14import { Label } from "@/components/ui/label";
15import { cn } from "@/lib/utils";
16 
17const STEPS = [
18  { id: 1, title: "Personal Details", icon: UserIcon },
19  { id: 2, title: "Your Goals", icon: SparklesIcon },
20  { id: 3, title: "Organization", icon: BuildingIcon },
21];
22 
23export function OnboardingForm() {
24  const [currentStep, setCurrentStep] = useState(1);
25 
26  return (
27    <div className="grid min-h-screen w-full lg:grid-cols-[400px_1fr]">
28      {/* Sidebar Progress Tracker */}
29      <div className="hidden flex-col border-r bg-zinc-50/50 p-10 lg:flex dark:bg-zinc-950/20">
30        <div className="mb-16 flex items-center gap-2">
31          <LogoIcon className="size-6" />
32          <span className="font-bold text-lg tracking-tight">Freddy</span>
33        </div>
34 
35        <div className="space-y-12">
36          {STEPS.map((step) => {
37            const isActive = step.id === currentStep;
38            const isCompleted = step.id < currentStep;
39 
40            return (
41              <div
42                className="group relative flex items-center gap-6"
43                key={step.id}
44              >
45                {step.id !== 3 && (
46                  <div
47                    className={cn(
48                      "absolute top-10 left-[19px] h-12 w-px bg-border transition-colors duration-500",
49                      isCompleted && "bg-primary/50"
50                    )}
51                  />
52                )}
53 
54                <div
55                  className={cn(
56                    "relative z-10 flex size-10 items-center justify-center rounded-full border bg-background transition-all duration-500",
57                    "relative z-10 flex size-10 items-center justify-center rounded-full border bg-background transition-all duration-500",
58                    isActive &&
59                      "border-primary shadow-sm ring-4 ring-primary/10",
60                    isCompleted &&
61                      "border-primary bg-primary text-primary-foreground",
62                    !(isActive || isCompleted) &&
63                      "border-muted text-muted-foreground"
64                  )}
65                >
66                  {isCompleted ? (
67// … truncated