Task view

src/app/workspace/page.tsx

@@ -2,6 +2,7 @@
 
 import AppSidebar, { SidebarTrigger } from "@/components/AppSidebar";
 import BoardView from "@/components/view/board/BoardView";
+import TaskView from "@/components/view/TaskView";
 import { Task } from "@/lib/types";
 import { useEffect, useState } from "react";
 
@@ -43,7 +44,7 @@ export default function Workspace() {
           </header>
         </div>
       </SidebarTrigger>
-      <BoardView
+      <TaskView
         tasks={tasks}
         setTasks={setTasks}
         createTask={createTask}

src/components/ui/tabs.tsx

@@ -0,0 +1,66 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+function Tabs({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  )
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

src/components/view/TaskView.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { SetState, Task } from "@/lib/types";
+import { Color } from "@/lib/ui/color";
+import BoardView from "./board/BoardView";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+
+export default function TaskView({
+  tags,
+  tasks,
+  setTasks,
+  createTask,
+}: {
+  tags: Record<string, { color: Color; name: string }>;
+  tasks: Task[];
+  setTasks: SetState<Task[]>;
+  createTask: (status: string) => void;
+}) {
+  return (
+    <div className="px-6 pt-3">
+      <Tabs defaultValue="board">
+        <TabsList>
+          <TabsTrigger value="board">Board</TabsTrigger>
+          <TabsTrigger value="list">List</TabsTrigger>
+        </TabsList>
+        <TabsContent value="board">
+          <BoardView
+            tasks={tasks}
+            setTasks={setTasks}
+            createTask={createTask}
+            tags={tags}
+          />
+        </TabsContent>
+        <TabsContent value="list">
+          <BoardView
+            tasks={tasks}
+            setTasks={setTasks}
+            createTask={createTask}
+            tags={tags}
+          />
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

src/components/view/board/BoardView.tsx

@@ -53,7 +53,7 @@ export default function BoardView({
   }
 
   return (
-    <div className="p-6 w-full h-full flex flex-col gap-6">
+    <div className="w-full h-full flex flex-col gap-6">
       <DragDropContext onDragEnd={onDragEnd}>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 items-start">
           {Object.keys(columnLabels).map((status) => (