Multi Step Component

1import { MultiStep } from "@/components/ui/multi-step-component";
2import { Input } from "@/components/ui/input";
3import { Checkbox } from "@/components/ui/checkbox";
4import { Button } from "@/components/ui/button";
5import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
6import React from "react";
7
8export function Example() {
9  const [name, setName] = React.useState("");
10  const [prefs, setPrefs] = React.useState({ email: false, sms: false, push: false });
11  const [gender, setGender] = React.useState("");
12  const [approved, setApproved] = React.useState(false);
13
14  const steps = [
15    {
16      title: "User Information",
17      content: (
18        <Input
19          placeholder="Enter your name"
20          value={name}
21          onChange={e => setName(e.target.value)}
22        />
23      ),
24      description: "Please enter your name."
25    },
26    {
27      title: "Notification Preferences",
28      content: (
29        <div className="flex flex-col gap-2">
30          <label className="flex items-center gap-2">
31            <Checkbox checked={prefs.email} onCheckedChange={v => setPrefs(p => ({ ...p, email: !!v }))} /> Email
32          </label>
33          <label className="flex items-center gap-2">
34            <Checkbox checked={prefs.sms} onCheckedChange={v => setPrefs(p => ({ ...p, sms: !!v }))} /> SMS
35          </label>
36          <label className="flex items-center gap-2">
37            <Checkbox checked={prefs.push} onCheckedChange={v => setPrefs(p => ({ ...p, push: !!v }))} /> Push Notification
38          </label>
39        </div>
40      ),
41      description: "Select your notification preferences."
42    },
43    {
44      title: "Gender Selection",
45      content: (
46        <RadioGroup value={gender} onValueChange={setGender}>
47          <RadioGroupItem value="male">Male</RadioGroupItem>
48          <RadioGroupItem value="female">Female</RadioGroupItem>
49        </RadioGroup>
50      ),
51      description: "Select your gender."
52    },
53    {
54      title: "Confirm and Submit",
55      content: (
56        <div className="flex flex-col gap-3"> 
57          <label className="flex items-center gap-2">
58            <Checkbox checked={approved} onCheckedChange={v => setApproved(!!v)} /> I confirm that all information is correct.
59          </label>
60          <Button disabled={!approved} className="mt-2">Submit</Button>
61        </div>
62      ),
63      description: "Final step: Confirm and submit."
64    }
65  ];
66
67  return <MultiStep steps={steps} />;
68}