feat: Delete cards

src/app/boards/[...id]/page.tsx

@@ -214,7 +214,7 @@ export default function BoardPage() {
                             <div
                               ref={provided.innerRef}
                               {...provided.droppableProps}
-                              className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] scrollbar-w-[8px] scrollbar scrollbar-thumb-dark-600 scrollbar-track-dark-100 h-full max-h-[calc(100vh-250px)] overflow-y-auto pr-1"
+                              className="scrollbar-thumb-rounded-[4px] scrollbar-track-rounded-[4px] scrollbar-w-[8px] scrollbar scrollbar-thumb-dark-600 scrollbar-track-dark-100 h-full max-h-[calc(100vh-250px)] min-h-[2rem] overflow-y-auto pr-1"
                             >
                               {list.cards?.map((card, index) => (
                                 <Draggable

src/app/cards/[...id]/components/DeleteCardConfirmation.tsx

@@ -0,0 +1,56 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { api } from "~/trpc/react";
+import { useModal } from "~/app/providers/modal";
+
+interface DeleteCardConfirmationProps {
+  cardPublicId: string;
+  boardPublicId: string;
+}
+
+export function DeleteCardConfirmation({
+  cardPublicId,
+  boardPublicId,
+}: DeleteCardConfirmationProps) {
+  const { closeModal } = useModal();
+  const router = useRouter();
+
+  const deleteCard = api.card.delete.useMutation({
+    onSuccess: () => {
+      closeModal();
+      router.push(`/boards/${boardPublicId}`);
+    },
+  });
+
+  return (
+    <>
+      <div className="flex w-full flex-col justify-between pb-4">
+        <h2 className="text-md pb-4 font-medium text-dark-1000">
+          Are you sure you want to delete this card?
+        </h2>
+        <p className="text-sm font-medium text-dark-900">
+          {"This action can't be undone."}
+        </p>
+      </div>
+      <div className="mt-5 flex justify-end sm:mt-6">
+        <button
+          className="mr-4 inline-flex justify-center rounded-md border-[1px] border-dark-600 bg-dark-300 px-3 py-2 text-sm font-semibold text-dark-1000 shadow-sm focus-visible:outline-none"
+          onClick={() => closeModal()}
+        >
+          Cancel
+        </button>
+        <button
+          onClick={() =>
+            deleteCard.mutate({
+              cardPublicId,
+            })
+          }
+          className="inline-flex justify-center rounded-md bg-dark-1000 px-3 py-2 text-sm font-semibold text-dark-50 shadow-sm focus-visible:outline-none"
+        >
+          Delete
+        </button>
+      </div>
+    </>
+  );
+}

src/app/cards/[...id]/components/Dropdown.tsx

@@ -0,0 +1,43 @@
+import { Fragment } from "react";
+import { Menu, Transition } from "@headlessui/react";
+import { HiEllipsisHorizontal } from "react-icons/hi2";
+import { useModal } from "~/app/providers/modal";
+
+export default function Dropdown() {
+  const { openModal } = useModal();
+
+  return (
+    <Menu as="div" className="relative inline-block text-left">
+      <div>
+        <Menu.Button className="flex h-8 w-8 items-center justify-center rounded-[5px] hover:bg-dark-200">
+          <HiEllipsisHorizontal size={25} color="white" />
+        </Menu.Button>
+      </div>
+
+      <Transition
+        as={Fragment}
+        enter="transition ease-out duration-100"
+        enterFrom="transform opacity-0 scale-95"
+        enterTo="transform opacity-100 scale-100"
+        leave="transition ease-in duration-75"
+        leaveFrom="transform opacity-100 scale-100"
+        leaveTo="transform opacity-0 scale-95"
+      >
+        <Menu.Items className="absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-dark-200 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+          <div className="flex">
+            <Menu.Item>
+              {() => (
+                <button
+                  onClick={() => openModal("DELETE_CARD")}
+                  className="m-1 w-full rounded-[5px] px-3 py-2 text-left text-sm text-dark-1000 hover:bg-dark-400"
+                >
+                  Delete
+                </button>
+              )}
+            </Menu.Item>
+          </div>
+        </Menu.Items>
+      </Transition>
+    </Menu>
+  );
+}

src/app/cards/[...id]/page.tsx

@@ -4,8 +4,13 @@ import { useParams } from "next/navigation";
 import { useFormik } from "formik";
 import ContentEditable from "react-contenteditable";
 
-import { api } from "~/trpc/react";
+import Dropdown from "./components/Dropdown";
+import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
 
+import Modal from "~/app/_components/modal";
+import { useModal } from "~/app/providers/modal";
+
+import { api } from "~/trpc/react";
 interface FormValues {
   cardId: string;
   title: string;
@@ -14,11 +19,14 @@ interface FormValues {
 
 export default function CardPage() {
   const params = useParams();
+  const { modalContentType } = useModal();
 
   const cardId = params?.id?.length ? params.id[0] : null;
 
   const { data } = api.card.byId.useQuery({ id: cardId ?? "" });
 
+  const boardId = data?.list?.board?.publicId;
+
   const updateCard = api.card.update.useMutation();
 
   const formik = useFormik({
@@ -43,7 +51,7 @@ export default function CardPage() {
     <div className="p-8">
       <div className="mb-8 flex w-full justify-between">
         <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
-          <div className="mt-2">
+          <div>
             <input
               type="text"
               id="title"
@@ -55,6 +63,9 @@ export default function CardPage() {
             />
           </div>
         </form>
+        <div className="flex">
+          <Dropdown />
+        </div>
       </div>
       <div className="mb-8 flex w-full max-w-2xl justify-between">
         <form onSubmit={formik.handleSubmit} className="w-full space-y-6">
@@ -71,6 +82,14 @@ export default function CardPage() {
           </div>
         </form>
       </div>
+      <Modal>
+        {modalContentType === "DELETE_CARD" && (
+          <DeleteCardConfirmation
+            boardPublicId={boardId ?? ""}
+            cardPublicId={cardId}
+          />
+        )}
+      </Modal>
     </div>
   );
 }