Seperated task component

src/components/view/board/BoardView.tsx

@@ -1,24 +1,12 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import {
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  CardDescription,
-} from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
-import { Color, getColor } from "@/lib/ui/color";
 import { PlusIcon } from "lucide-react";
-
+import { Task } from "@/lib/types";
-type Task = {
+import BoardTask from "./Task";
-  id: string;
-  title: string;
-  description?: string;
-  tags?: { name: string; color: Color }[];
-};
 
 const columnLabels: Record<string, string> = {
   todo: "To do",
@@ -125,30 +113,7 @@ export default function BoardView() {
                           index={index}
                         >
                           {(provided) => (
-                            <Card
+                            <BoardTask provided={provided} task={task} />
-                              ref={provided.innerRef}
-                              {...provided.draggableProps}
-                              {...provided.dragHandleProps}
-                              className="bg-background"
-                            >
-                              <CardHeader>
-                                <CardTitle>{task.title}</CardTitle>
-                                <CardDescription>
-                                  {task.description}
-                                </CardDescription>
-                              </CardHeader>
-                              <CardContent className="flex flex-wrap gap-2 overflow-hidden">
-                                {task.tags?.map((tag, i) => (
-                                  <span
-                                    key={tag.name}
-                                    style={getColor(tag.color)}
-                                    className="inline-flex items-center py-0.5 px-1.5 rounded-sm max-w-full truncate"
-                                  >
-                                    {tag.name}
-                                  </span>
-                                ))}
-                              </CardContent>
-                            </Card>
                           )}
                         </Draggable>
                       ))}

src/components/view/board/Task.tsx

@@ -0,0 +1,43 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Task } from "@/lib/types";
+import { getColor } from "@/lib/ui/color";
+import { DraggableProvided } from "@hello-pangea/dnd";
+
+export default function BoardTask({
+  task,
+  provided,
+}: {
+  task: Task;
+  provided: DraggableProvided;
+}) {
+  return (
+    <Card
+      ref={provided.innerRef}
+      {...provided.draggableProps}
+      {...provided.dragHandleProps}
+      className="bg-background"
+    >
+      <CardHeader>
+        <CardTitle>{task.title}</CardTitle>
+        <CardDescription>{task.description}</CardDescription>
+      </CardHeader>
+      <CardContent className="flex flex-wrap gap-2 overflow-hidden">
+        {task.tags?.map((tag, i) => (
+          <span
+            key={tag.name}
+            style={getColor(tag.color)}
+            className="inline-flex items-center py-0.5 px-1.5 rounded-sm max-w-full truncate"
+          >
+            {tag.name}
+          </span>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}

src/lib/types.ts

@@ -0,0 +1,8 @@
+import { Color } from "./ui/color";
+
+export type Task = {
+  id: string;
+  title: string;
+  description?: string;
+  tags?: { name: string; color: Color }[];
+};