Dialog Multi-Step Wizard

"use client";

import { AppWindowIcon as Apps } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import { Separator } from "@/components/ui/separator";

export default function Dialog11() {
  const [open, setOpen] = useState(true);

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button>Initialize New Project</Button>
      </DialogTrigger>
      <DialogContent className="overflow-visible p-0 sm:max-w-2xl gap-0">
        <DialogHeader className="border-b px-6 py-4 mb-0">
          <DialogTitle>Initialize New Project</DialogTitle>
        </DialogHeader>

        <form action="#" method="POST">
          <div className="flex flex-col-reverse md:flex-row">
            <div className="flex flex-col justify-between md:w-80 md:border-r">
              <div className="flex-1 grow">
                <div className="border-t p-6 md:border-none">
                  <div className="flex items-center space-x-3">
                    <div className="inline-flex shrink-0 items-center justify-center rounded-sm bg-muted p-3">
                      <Apps
                        className="size-5 text-foreground"
                        aria-hidden={true}
                      />
                    </div>
                    <div className="space-y-0.5">
                      <h3 className="text-sm font-medium text-foreground">
                        Project Starter
                      </h3>
                      <p className="text-sm text-muted-foreground">
                        Configure your new codebase
                      </p>
                    </div>
                  </div>
                  <Separator className="my-4" />
                  <h4 className="text-sm font-medium text-foreground">
                    Description
                  </h4>
                  <p className="mt-1 text-sm leading-6 text-muted-foreground">
                    Quickly set up the foundational tools for your project.
                  </p>
                  <h4 className="mt-6 text-sm font-medium text-foreground">
                    Info
                  </h4>
                  <p className="mt-1 text-sm leading-6 text-muted-foreground">
                    Select your preferred stack and configurations.
                  </p>
                </div>
              </div>
              <div className="flex items-center justify-between border-t p-4">
                <DialogClose asChild>
                  <Button type="button" variant="ghost">
                    Cancel
                  </Button>
                </DialogClose>
                <Button type="submit" size="sm">
                  Initialize
                </Button>
              </div>
            </div>

            <div className="flex-1 space-y-6 p-6 md:px-6 md:pb-8 md:pt-6">
              <div className="space-y-2">
                <div className="flex items-center space-x-3">
                  <div className="inline-flex size-6 items-center justify-center rounded-sm bg-muted text-sm text-foreground">
                    1
                  </div>
                  <Label
                    htmlFor="framework"
                    className="text-sm font-medium text-foreground"
                  >
                    Select Framework
                  </Label>
                </div>
                <Select defaultValue="react">
                  <SelectTrigger
                    id="framework"
                    name="framework"
                    className="w-full"
                  >
                    <SelectValue placeholder="Select framework" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="react">Next.js</SelectItem>
                    <SelectItem value="vue">React Router</SelectItem>
                    <SelectItem value="angular">Tanstack Start</SelectItem>
                    <SelectItem value="svelte">SvelteKit</SelectItem>
                    <SelectItem value="vanilla">SolidStart</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div className="space-y-2">
                <div className="flex items-center space-x-3">
                  <div className="inline-flex size-6 items-center justify-center rounded-sm bg-muted text-sm text-foreground">
                    2
                  </div>
                  <Label
                    htmlFor="package-manager"
                    className="text-sm font-medium text-foreground"
                  >
                    Choose Package Manager
                  </Label>
                </div>
                <Select defaultValue="npm">
                  <SelectTrigger
                    id="package-manager"
                    name="package-manager"
                    className="w-full"
                  >
                    <SelectValue placeholder="Select manager" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="npm">npm</SelectItem>
                    <SelectItem value="yarn">yarn</SelectItem>
                    <SelectItem value="pnpm">pnpm</SelectItem>
                    <SelectItem value="bun">bun</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <div className="flex items-center space-x-3">
                  <div className="inline-flex size-6 items-center justify-center rounded-sm bg-muted text-sm text-foreground">
                    3
                  </div>
                  <Label
                    htmlFor="linter"
                    className="text-sm font-medium text-foreground"
                  >
                    Configure Linter/Formatter
                  </Label>
                </div>
                <p className="mt-1 text-xs text-muted-foreground">
                  Ensure code quality and consistency.
                </p>
                <Select defaultValue="eslint-prettier">
                  <SelectTrigger
                    id="linter"
                    name="linter"
                    className="mt-4 w-full"
                  >
                    <SelectValue placeholder="Select tools" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="eslint-prettier">
                      ESLint + Prettier
                    </SelectItem>
                    <SelectItem value="eslint">ESLint Only</SelectItem>
                    <SelectItem value="prettier">Prettier Only</SelectItem>
                    <SelectItem value="biome">Biome</SelectItem>
                    <SelectItem value="oxlint">Oxlint</SelectItem>
                    <SelectItem value="none">None</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              <div>
                <div className="flex items-center space-x-3">
                  <div className="inline-flex size-6 items-center justify-center rounded-sm bg-muted text-sm text-foreground">
                    4
                  </div>
                  <Label
                    htmlFor="testing-tool"
                    className="text-sm font-medium text-foreground"
                  >
                    Select Testing Tool
                  </Label>
                </div>
                <p className="mt-1 text-xs text-muted-foreground">
                  Choose a framework for unit/integration tests.
                </p>
                <Select defaultValue="jest">
                  <SelectTrigger
                    id="testing-tool"
                    name="testing-tool"
                    className="mt-4 w-full"
                  >
                    <SelectValue placeholder="Select tool" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="jest">Jest</SelectItem>
                    <SelectItem value="vitest">Vitest</SelectItem>
                    <SelectItem value="cypress">Cypress</SelectItem>
                    <SelectItem value="none">None</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}