Edit task in table view

src/components/view/board/Task.tsx

@@ -6,20 +6,11 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import { MultiSelect } from "@/components/ui/multi-select";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from "@/components/ui/sheet";
+import { SheetTrigger } from "@/components/ui/sheet";
 import { Task } from "@/lib/types";
 import { Color, getColor } from "@/lib/ui/color";
 import { DraggableProvided } from "@hello-pangea/dnd";
+import TaskEdit from "../TaskEdit";
 
 export default function BoardTask({
   task,
@@ -33,7 +24,7 @@ export default function BoardTask({
   tags: Record<string, { color: Color; name: string }>;
 }) {
   return (
-    <Sheet>
+    <TaskEdit task={task} tags={tags} setTask={setTask}>
       <SheetTrigger asChild>
         <Card
           ref={provided.innerRef}
@@ -58,53 +49,6 @@ export default function BoardTask({
           </CardContent>
         </Card>
       </SheetTrigger>
-      <SheetContent>
-        <SheetHeader>
-          <SheetTitle>Edit task</SheetTitle>
-          <SheetDescription>
-            Make changes to the task here. Click save when you&apos;re done.
-          </SheetDescription>
-        </SheetHeader>
-        <div className="grid flex-1 auto-rows-min gap-6 px-4">
-          <div className="grid gap-3">
-            <Label>Title</Label>
-            <Input
-              defaultValue={task.title}
-              onChange={(e) => setTask({ ...task, title: e.target.value })}
-            />
-          </div>
-          <div className="grid gap-3">
-            <Label>Description</Label>
-            <Input
-              defaultValue={task.description}
-              onChange={(e) =>
-                setTask({ ...task, description: e.target.value })
-              }
-            />
-          </div>
-          <div className="grid gap-3">
-            <Label>Status</Label>
-            <MultiSelect
-              options={Object.entries(tags).map(([id, tag]) => ({
-                label: tag.name,
-                value: id,
-                style: {
-                  iconColor: getColor(tag.color).color,
-                  badgeColor: getColor(tag.color).backgroundColor,
-                },
-              }))}
-              onValueChange={(tags) => setTask({ ...task, tags })}
-              defaultValue={task.tags}
-            />
-            {/* <Input
-              defaultValue={task.description}
-              onChange={(e) =>
-                setTask({ ...task, description: e.target.value })
-              }
-            /> */}
-          </div>
-        </div>
-      </SheetContent>
-    </Sheet>
+    </TaskEdit>
   );
 }