Dialog Multi-Step Wizard

1'use client';
2 
3import { AppWindowIcon as Apps } from 'lucide-react';
4import { useState } from 'react';
5 
6import { Button } from '@/components/ui/button';
7import {
8  Dialog,
9  DialogClose,
10  DialogContent,
11  DialogHeader,
12  DialogTitle,
13  DialogTrigger,
14} from '@/components/ui/dialog';
15import { Label } from '@/components/ui/label';
16import {
17  Select,
18  SelectContent,
19  SelectItem,
20  SelectTrigger,
21  SelectValue,
22} from '@/components/ui/select';
23import { Separator } from '@/components/ui/separator';
24 
25export default function Dialog11() {
26  const [open, setOpen] = useState(true);
27 
28  return (
29    <Dialog onOpenChange={setOpen} open={open}>
30      <DialogTrigger render={<Button />}>Initialize New Project</DialogTrigger>
31      <DialogContent className="gap-0 overflow-visible p-0 sm:max-w-2xl">
32        <DialogHeader className="mb-0 border-b px-6 py-4">
33          <DialogTitle>Initialize New Project</DialogTitle>
34        </DialogHeader>
35 
36        <form action="#" method="POST">
37          <div className="flex flex-col-reverse md:flex-row">
38            <div className="flex flex-col justify-between md:w-80 md:border-r">
39              <div className="flex-1 grow">
40                <div className="border-t p-6 md:border-none">
41                  <div className="flex items-center space-x-3">
42                    <div className="inline-flex shrink-0 items-center justify-center rounded-sm bg-muted p-3">
43                      <Apps
44                        aria-hidden={true}
45                        className="size-5 text-foreground"
46                      />
47                    </div>
48                    <div className="space-y-0.5">
49                      <h3 className="text-balance font-medium text-foreground text-sm">
50                        Project Starter
51                      </h3>
52                      <p className="text-pretty text-muted-foreground text-sm">
53                        Configure your new codebase
54                      </p>
55                    </div>
56                  </div>
57                  <Separator className="my-4" />
58                  <h4 className="text-balance font-medium text-foreground text-sm">
59                    Description
60                  </h4>
61                  <p className="mt-1 text-pretty text-muted-foreground text-sm leading-6">
62                    Quickly set up the foundational tools for your project.
63                  </p>
64                  <h4 className="mt-6 text-balance font-medium text-foreground text-sm">
65                    Info
66// … truncated