draupnir4all-web

commit 0ab255f35022e33095c97a45639ebfa34e1b8077
parent 6433be1248aa660ba53d1c37156deca539c49dd0
Author: MTRNord <mtrnord1@gmail.com>
Date:   Mon, 28 Apr 2025 14:36:54 +0200

Add a dialog for removing a protected room

Signed-off-by: MTRNord <mtrnord1@gmail.com>

Diffstat:
M
src/components/dashboard/protected-rooms-list.tsx
 | 
8
++------
A
src/components/modals/are-you-sure.tsx
 | 
39
+++++++++++++++++++++++++++++++++++++++

2 files changed, 41 insertions(+), 6 deletions(-)
diff --git a/src/components/dashboard/protected-rooms-list.tsx b/src/components/dashboard/protected-rooms-list.tsx
@@ -1,6 +1,5 @@
-import { Button } from "@/components/ui/button";
-import { Trash2 } from "lucide-react";
 import { Team } from "../../app/dashboard/mockData";
+import AreYouSureDialog from "../modals/are-you-sure";
 
 interface ProtectedRomsListProps {
     team: Team;
@@ -14,10 +13,7 @@ export default function ProtectedRomsList({ team }: ProtectedRomsListProps) {
                     <div>
                         <p>{room}</p>
                     </div>
-                    <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-gray-400 hover:text-red-400">
-                        <Trash2 className="h-4 w-4" />
-                        <span className="sr-only">Remove</span>
-                    </Button>
+                    <AreYouSureDialog titlePart="Protected Room" description="Are you sure you want to unprotect the room?" />
                 </div>
             ))}
         </div>
diff --git a/src/components/modals/are-you-sure.tsx b/src/components/modals/are-you-sure.tsx
@@ -0,0 +1,38 @@
+import { Button } from "@/components/ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Trash2 } from "lucide-react";
+
+interface AreYouSureDialogProps {
+    description: string;
+    titlePart: string
+}
+
+export default function AreYouSureDialog({ description, titlePart }: AreYouSureDialogProps) {
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <Button variant="ghost" size="sm" className="h-8 w-8 p-0 text-gray-400 hover:text-red-400">
+                    <Trash2 className="h-4 w-4" />
+                    <span className="sr-only">Remove</span>
+                </Button>
+            </DialogTrigger>
+            <DialogContent className="bg-gray-950 border-gray-800">
+                <DialogHeader>
+                    <DialogTitle>Remove {titlePart}</DialogTitle>
+                    <DialogDescription className="text-gray-400">
+                        {description}
+                    </DialogDescription>
+                </DialogHeader>
+                <DialogFooter>
+                    <Button
+                        variant="outline"
+                        className="border-gray-700 text-gray-400 hover:bg-gray-900 hover:text-gray-300"
+                    >
+                        Cancel
+                    </Button>
+                    <Button className="bg-red-600 text-white hover:bg-red-700">Remove {titlePart}</Button>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog >
+    )
+}
+\ No newline at end of file