feat: quiz status chip and delete quiz dialog

src/components/QuizStatusChip/QuizStatusChip.tsx

@@ -0,0 +1,19 @@
+import { Chip } from "@material-tailwind/react";
+import { size } from "@material-tailwind/react/types/components/chip";
+import { colors } from "@material-tailwind/react/types/generic";
+import { QuizStatus } from "@generated/graphql.ts";
+
+interface QuizStatusChipProps {
+  status?: QuizStatus;
+  size?: size;
+}
+
+export function QuizStatusChip({ status, size = "md" }: QuizStatusChipProps) {
+  const color = {
+    [QuizStatus.Pending]: "blue",
+    [QuizStatus.Approved]: "green",
+    [QuizStatus.Cancelled]: "red",
+  }[status || QuizStatus.Pending];
+
+  return <Chip color={color as colors} value={status} size={size} />;
+}

src/pages/Quizzes/DeleteQuiz.tsx

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  IconButton,
+  Typography,
+} from "@material-tailwind/react";
+import { X } from "lucide-react";
+import { toast } from "react-toastify";
+
+export function DeleteQuiz({}: { quizId: string }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleDialog = () => setIsOpen(!isOpen);
+
+  return (
+    <>
+      <IconButton size="sm" variant="text" onClick={toggleDialog}>
+        <X className="size-4 stroke-red-500" />
+      </IconButton>
+
+      <Dialog open={isOpen} handler={toggleDialog}>
+        <DialogHeader>Are you sure you want to delete this quiz?</DialogHeader>
+        <DialogBody>
+          <Typography>This action will make a soft delete of the quiz.</Typography>
+        </DialogBody>
+        <DialogFooter>
+          <Button variant="gradient" color="gray" onClick={toggleDialog} className="mr-2">
+            Go back
+          </Button>
+          <Button
+            variant="filled"
+            color="red"
+            onClick={() => {
+              toast.success("Quiz deleted successful");
+            }}
+          >
+            Delete
+          </Button>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}

src/pages/Quizzes/tableColumns.tsx

@@ -1,25 +1,16 @@
-import { Button, Typography } from "@material-tailwind/react";
+import { IconButton, Typography } from "@material-tailwind/react";
 import { ColumnDef } from "@tanstack/table-core";
 import { format } from "date-fns";
+import { Eye } from "lucide-react";
 import { Link } from "react-router-dom";
 import { DifficultyChip } from "@components/DifficultyChip/DifficultyChip.tsx";
-import { Difficulty } from "@generated/graphql.ts";
+import { QuizStatusChip } from "@components/QuizStatusChip/QuizStatusChip.tsx";
+import { Difficulty, QuizStatus } from "@generated/graphql.ts";
 import { Country } from "@pages/Quizzes/Country.tsx";
+import { DeleteQuiz } from "@pages/Quizzes/DeleteQuiz.tsx";
 import { QuizListData } from "@pages/Quizzes/mapTableData.ts";
 
 export const tableColumns: ColumnDef<QuizListData>[] = [
-  {
-    accessorKey: "id",
-    header: "ID",
-    enableSorting: false,
-    cell: ({ getValue }) => (
-      <Link to={`/game/quiz/${getValue()}/edit`}>
-        <Button variant="text" size="sm" className="px-2 underline">
-          {getValue() as string}
-        </Button>
-      </Link>
-    ),
-  },
   {
     accessorKey: "title",
     header: "Title",
@@ -28,7 +19,7 @@ export const tableColumns: ColumnDef<QuizListData>[] = [
   {
     accessorKey: "status",
     header: "Status",
-    cell: ({ getValue }) => <Typography variant="small">{getValue() as string}</Typography>,
+    cell: ({ getValue }) => <QuizStatusChip status={getValue() as QuizStatus} />,
   },
   {
     accessorKey: "difficulty",
@@ -55,4 +46,20 @@ export const tableColumns: ColumnDef<QuizListData>[] = [
     header: "Updated at",
     cell: ({ getValue }) => <Typography variant="small">{format(getValue() as Date, "dd MMM yyyy")}</Typography>,
   },
+  {
+    accessorKey: "id",
+    header: "Actions",
+    enableSorting: false,
+    cell: ({ getValue }) => (
+      <div>
+        <Link to={`/game/quiz/${getValue()}/edit`}>
+          <IconButton size="sm" variant="text">
+            <Eye className="size-4" />
+          </IconButton>
+        </Link>
+
+        <DeleteQuiz quizId={(getValue() as string) || ""} />
+      </div>
+    ),
+  },
 ];