Router

src/components/view/TaskView.tsx

@@ -1,15 +1,20 @@
 "use client";
 
-import { SetState, Task } from "@/lib/types";
+import { Tag, TagId, Task, TaskId } from "@/lib/types";
 import { Color } from "@/lib/ui/color";
 import BoardView from "./board/BoardView";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { TableView } from "./table/TableView";
 
 export type TaskViewProps = {
-  tags: Record<string, { color: Color; name: string }>;
-  tasks: Task[];
-  setTasks: SetState<Task[]>;
+  tags: Record<TagId, Tag>;
+
+  tasks: Record<TaskId, Task>;
+
+  /** Replace entire task array */
+  setTasks: (tasks: Task[]) => void;
+
+  /** Create a new task with a status */
   createTask: (status: string) => void;
 };
 
@@ -20,13 +25,14 @@ export default function TaskView({
   createTask,
 }: TaskViewProps) {
   return (
-    <div className="px-6 pt-3">
-      <Tabs defaultValue="board">
-        <TabsList>
+    <div className="px-6 pt-4">
+      <Tabs defaultValue="board" className="w-full">
+        <TabsList className="mb-4">
           <TabsTrigger value="board">Board</TabsTrigger>
           <TabsTrigger value="table">Table</TabsTrigger>
         </TabsList>
-        <TabsContent value="board">
+
+        <TabsContent value="board" className="mt-0">
           <BoardView
             tasks={tasks}
             setTasks={setTasks}
@@ -34,7 +40,8 @@ export default function TaskView({
             tags={tags}
           />
         </TabsContent>
-        <TabsContent value="table">
+
+        <TabsContent value="table" className="mt-0">
           <TableView
             tasks={tasks}
             setTasks={setTasks}