server deletion

src/app/dashboard/server.tsx

@@ -1,3 +1,13 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   Card,
   CardContent,
@@ -5,6 +15,12 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 import { Label } from "@/components/ui/label";
 import { Progress } from "@/components/ui/progress";
 import Server from "@/types/server";
@@ -14,8 +30,11 @@ import {
   MapPin,
   MemoryStick,
   Network,
+  Pencil,
+  Trash,
   Wifi,
 } from "lucide-react";
+import { useState } from "react";
 
 function UsageBar({
   value,
@@ -41,50 +60,99 @@ function UsageBar({
   );
 }
 
-export default function ServerComponent({ server }: { server: Server }) {
+export default function ServerComponent({
+  server,
+  onDelete,
+}: {
+  server: Server;
+  onDelete: () => void;
+}) {
+  const [deleteAlert, setDeleteAlert] = useState(false);
+
   return (
-    <Card className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer">
-      <CardHeader>
-        <CardTitle>{server.name}</CardTitle>
-        <CardDescription className="flex justify-between">
-          <div className="flex gap-2">
-            {server.status[0].toUpperCase() + server.status.slice(1)} {" · "}
-            {server.ip}
-            {server.location && (
-              <div className="flex items-center gap-0.5">
-                <MapPin size={14} />
-                {server.location}
-              </div>
-            )}
-          </div>
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="w-full flex flex-col gap-3.5">
-        <UsageBar
-          value={server.cpu}
-          Icon={Cpu}
-          text="CPU"
-          color="var(--chart-2)"
-        />
-        <UsageBar
-          value={server.memory}
-          Icon={MemoryStick}
-          text="Memory"
-          color="var(--chart-1)"
-        />
-        <UsageBar
-          value={server.storage}
-          Icon={HardDrive}
-          text="Storage"
-          color="var(--chart-5)"
-        />
-        <UsageBar
-          value={server.network}
-          Icon={Network}
-          text="Network"
-          color="var(--chart-3)"
-        />
-      </CardContent>
-    </Card>
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger>
+          <Card className="w-full transition-transform duration-500 hover:scale-102 hover:cursor-pointer">
+            <CardHeader>
+              <CardTitle>{server.name}</CardTitle>
+              <CardDescription className="flex justify-between">
+                <div className="flex gap-2">
+                  {server.status[0].toUpperCase() + server.status.slice(1)}{" "}
+                  {" · "}
+                  {server.ip}
+                  {server.location && (
+                    <div className="flex items-center gap-0.5">
+                      <MapPin size={14} />
+                      {server.location}
+                    </div>
+                  )}
+                </div>
+              </CardDescription>
+            </CardHeader>
+            <CardContent className="w-full flex flex-col gap-3.5">
+              <UsageBar
+                value={server.cpu}
+                Icon={Cpu}
+                text="CPU"
+                color="var(--chart-2)"
+              />
+              <UsageBar
+                value={server.memory}
+                Icon={MemoryStick}
+                text="Memory"
+                color="var(--chart-1)"
+              />
+              <UsageBar
+                value={server.storage}
+                Icon={HardDrive}
+                text="Storage"
+                color="var(--chart-5)"
+              />
+              <UsageBar
+                value={server.network}
+                Icon={Network}
+                text="Network"
+                color="var(--chart-3)"
+              />
+            </CardContent>
+          </Card>
+        </ContextMenuTrigger>
+        <ContextMenuContent>
+          <ContextMenuItem>
+            <Pencil className="text-current" />
+            Edit
+          </ContextMenuItem>
+          <ContextMenuItem
+            className="text-destructive"
+            onClick={() => setDeleteAlert(true)}
+          >
+            <Trash className="text-current" />
+            Delete
+          </ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+
+      <AlertDialog open={deleteAlert} onOpenChange={setDeleteAlert}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>Are you sure?</AlertDialogTitle>
+            <AlertDialogDescription>
+              This action will permanently remove your server from the server
+              list
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>Cancel</AlertDialogCancel>
+            <AlertDialogAction
+              className="text-destructive-foreground bg-destructive"
+              onClick={onDelete}
+            >
+              Delete
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }