Simple todo workspace

2025-11-09 21:12:22 +01:00
parent 4733060fdf
commit 7c7e0dabc8
7 changed files with 498 additions and 2 deletions
@@ -0,0 +1,177 @@
+"use client";
+
+import React, { useEffect, useState } from "react";
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+} from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { Trash } from "lucide-react";
+import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
+
+type Task = {
+  id: string;
+  title: string;
+  description?: string;
+};
+
+type ColumnKey = "todo" | "inprogress" | "done";
+
+const columnLabels: Record<ColumnKey, string> = {
+  todo: "To do",
+  inprogress: "In progress",
+  done: "Done",
+};
+
+const id = (prefix = "t") =>
+  `${prefix}_${Math.random().toString(36).slice(2, 9)}`;
+
+export default function Workspace() {
+  const [columns, setColumns] = useState<Record<ColumnKey, Task[]>>({
+    todo: [],
+    inprogress: [],
+    done: [],
+  });
+
+  useEffect(() => {
+    setColumns({
+      todo: [
+        { id: id(), title: "Buy groceries" },
+        { id: id(), title: "Plan sprint" },
+      ],
+      inprogress: [{ id: id(), title: "Build header" }],
+      done: [{ id: id(), title: "Set up repo" }],
+    });
+  }, []);
+
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) return null;
+
+  function removeTask(col: ColumnKey, taskId: string) {
+    setColumns((c) => ({ ...c, [col]: c[col].filter((t) => t.id !== taskId) }));
+  }
+
+  function onDragEnd(result: any) {
+    const { source, destination } = result;
+    if (!destination) return;
+
+    const sourceCol = source.droppableId as ColumnKey;
+    const destCol = destination.droppableId as ColumnKey;
+
+    if (sourceCol === destCol) {
+      const items = Array.from(columns[sourceCol]);
+      const [moved] = items.splice(source.index, 1);
+      items.splice(destination.index, 0, moved);
+      setColumns({ ...columns, [sourceCol]: items });
+    } else {
+      const sourceItems = Array.from(columns[sourceCol]);
+      const destItems = Array.from(columns[destCol]);
+      const [moved] = sourceItems.splice(source.index, 1);
+      destItems.splice(destination.index, 0, moved);
+      setColumns({
+        ...columns,
+        [sourceCol]: sourceItems,
+        [destCol]: destItems,
+      });
+    }
+  }
+
+  return (
+    <div className="p-6 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) as ColumnKey[]).map((colKey) => (
+            <Droppable key={colKey} droppableId={colKey}>
+              {(provided) => (
+                <Card
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                  className="min-h-[220px] bg-muted/30"
+                >
+                  <CardHeader>
+                    <CardTitle className="flex items-center justify-between">
+                      <span>{columnLabels[colKey]}</span>
+                      <span className="text-sm text-muted-foreground">
+                        {columns[colKey].length}
+                      </span>
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="flex flex-col gap-3">
+                      {columns[colKey].map((task, index) => (
+                        <Draggable
+                          key={task.id}
+                          draggableId={task.id}
+                          index={index}
+                        >
+                          {(provided) => (
+                            <div
+                              ref={provided.innerRef}
+                              {...provided.draggableProps}
+                              {...provided.dragHandleProps}
+                              className="border rounded-md p-3 bg-white shadow-sm hover:shadow-md transition flex flex-col gap-2"
+                            >
+                              <div className="flex justify-between items-start">
+                                <div>
+                                  <strong className="block">
+                                    {task.title}
+                                  </strong>
+                                  {task.description ? (
+                                    <p className="text-sm text-muted-foreground">
+                                      {task.description}
+                                    </p>
+                                  ) : null}
+                                </div>
+                                <Button
+                                  size="sm"
+                                  variant="destructive"
+                                  onClick={() => removeTask(colKey, task.id)}
+                                >
+                                  <Trash size={14} />
+                                </Button>
+                              </div>
+                            </div>
+                          )}
+                        </Draggable>
+                      ))}
+                      {provided.placeholder}
+                      {columns[colKey].length === 0 && (
+                        <p className="text-sm text-muted-foreground">
+                          No tasks — try adding one!
+                        </p>
+                      )}
+                    </div>
+                  </CardContent>
+                  <CardFooter>
+                    <div className="flex justify-between w-full items-center">
+                      <span className="text-sm text-muted-foreground">
+                        Quick actions
+                      </span>
+                      <Button
+                        size="sm"
+                        onClick={() => {
+                          const t: Task = { id: id(), title: "New quick task" };
+                          setColumns((c) => ({
+                            ...c,
+                            [colKey]: [t, ...c[colKey]],
+                          }));
+                        }}
+                      >
+                        Quick add
+                      </Button>
+                    </div>
+                  </CardFooter>
+                </Card>
+              )}
+            </Droppable>
+          ))}
+        </div>
+      </DragDropContext>
+    </div>
+  );
+}
@@ -0,0 +1,60 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost:
+          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }
@@ -0,0 +1,92 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn(
+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-action"
+      className={cn(
+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardAction,
+  CardDescription,
+  CardContent,
+}
@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }