Delete Project Dialog

1"use client";
2
3import { useId, useState } from "react";
4
5import { CircleAlertIcon } from "lucide-react";
6
7import { Button } from "@/components/ui/button";
8import { Input } from "@/components/ui/input";
9import { Label } from "@/components/ui/label";
10import {
11  ResponsiveDialog,
12  ResponsiveDialogClose,
13  ResponsiveDialogContent,
14  ResponsiveDialogDescription,
15  ResponsiveDialogFooter,
16  ResponsiveDialogHeader,
17  ResponsiveDialogTitle,
18  ResponsiveDialogTrigger,
19} from "@/components/ui/revola";
20
21const PROJECT_NAME = "Revola";
22export default function DeleteProjectDialog() {
23  const id = useId();
24  const [inputValue, setInputValue] = useState("");
25
26  return (
27    <ResponsiveDialog alert>
28      <ResponsiveDialogTrigger asChild>
29        <Button variant="outline" className="h-12 rounded-full px-6 capitalize">
30          Delete Project
31        </Button>
32      </ResponsiveDialogTrigger>
33      <ResponsiveDialogContent className="sm:max-w-[400px]">
34        <div className="space-y-4 overflow-y-auto p-6 max-sm:pt-0">
35          <div className="flex flex-col items-center gap-2">
36            <div className="flex size-9 shrink-0 items-center justify-center rounded-full border" aria-hidden="true">
37              <CircleAlertIcon className="opacity-80" size={16} />
38            </div>
39
40            <ResponsiveDialogHeader className="px-4 pb-4 sm:p-0 sm:text-center">
41              <ResponsiveDialogTitle>Final confirmation</ResponsiveDialogTitle>
42              <ResponsiveDialogDescription>
43                This action cannot be undone. To confirm, please enter the project name{" "}
44                <span className="text-foreground">Revola</span>.
45              </ResponsiveDialogDescription>
46            </ResponsiveDialogHeader>
47          </div>
48
49          <form className="space-y-5">
50            <div className="space-y-2">
51              <Label htmlFor={id}>Project name</Label>
52              <Input
53                id={id}
54                type="text"
55                value={inputValue}
56                placeholder="Type Revola to confirm"
57                onChange={(e) => setInputValue(e.target.value)}
58              />
59            </div>
60
61            <ResponsiveDialogFooter className="gap-4 sm:gap-2">
62              <ResponsiveDialogClose asChild>
63                <Button type="button" variant="outline" className="flex-1">
64                  Cancel
65                </Button>
66              </ResponsiveDialogClose>
67// … truncated