Initial Commit

app/(platform)/(dashboard)/board/[boardId]/_components/card-item.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { Draggable } from "@hello-pangea/dnd";
+import { Card } from "@prisma/client";
+
+import { useCardModal } from "@/hooks/use-card-modal";
+
+interface CardItemProps {
+  index: number;
+  data: Card;
+}
+
+export const CardItem = ({ index, data }: CardItemProps) => {
+  const cardModal = useCardModal();
+
+  return (
+    <Draggable draggableId={data.id} index={index}>
+      {(provided) => (
+        <div
+          {...provided.draggableProps}
+          {...provided.dragHandleProps}
+          ref={provided.innerRef}
+          role="button"
+          onClick={() => cardModal.onOpen(data.id)}
+          className="truncate border-2 border-transparent hover:border-black py-2 px-3 text-sm bg-white rounded-md shadow-sm"
+        >
+          {data.title}
+        </div>
+      )}
+    </Draggable>
+  );
+};