Better stuff
This commit is contained in:
+1
-1
@@ -25,7 +25,7 @@ export default function RootLayout({
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased dark`}
|
||||
>
|
||||
{children}
|
||||
</body>
|
||||
|
||||
+48
-42
@@ -7,20 +7,21 @@ import {
|
||||
CardTitle,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Trash } from "lucide-react";
|
||||
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
|
||||
import { Color, getColor } from "@/lib/ui/color";
|
||||
|
||||
type Task = {
|
||||
id: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
tags?: { name: string; color: Color }[];
|
||||
};
|
||||
|
||||
type ColumnKey = "todo" | "inprogress" | "done";
|
||||
|
||||
const columnLabels: Record<ColumnKey, string> = {
|
||||
const columnLabels: Record<string, string> = {
|
||||
todo: "To do",
|
||||
inprogress: "In progress",
|
||||
done: "Done",
|
||||
@@ -30,7 +31,7 @@ const id = (prefix = "t") =>
|
||||
`${prefix}_${Math.random().toString(36).slice(2, 9)}`;
|
||||
|
||||
export default function Workspace() {
|
||||
const [columns, setColumns] = useState<Record<ColumnKey, Task[]>>({
|
||||
const [columns, setColumns] = useState<Record<string, Task[]>>({
|
||||
todo: [],
|
||||
inprogress: [],
|
||||
done: [],
|
||||
@@ -42,7 +43,20 @@ export default function Workspace() {
|
||||
{ id: id(), title: "Buy groceries" },
|
||||
{ id: id(), title: "Plan sprint" },
|
||||
],
|
||||
inprogress: [{ id: id(), title: "Build header" }],
|
||||
inprogress: [
|
||||
{
|
||||
id: id(),
|
||||
title: "Build header",
|
||||
description: "A simple description",
|
||||
tags: [
|
||||
{ name: "Website", color: "pink" },
|
||||
{ name: "Development", color: "blue" },
|
||||
{ name: "API", color: "green" },
|
||||
{ name: "App", color: "purple" },
|
||||
{ name: "Rust", color: "orange" },
|
||||
],
|
||||
},
|
||||
],
|
||||
done: [{ id: id(), title: "Set up repo" }],
|
||||
});
|
||||
}, []);
|
||||
@@ -52,16 +66,12 @@ export default function Workspace() {
|
||||
|
||||
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;
|
||||
const sourceCol = source.droppableId;
|
||||
const destCol = destination.droppableId;
|
||||
|
||||
if (sourceCol === destCol) {
|
||||
const items = Array.from(columns[sourceCol]);
|
||||
@@ -85,13 +95,13 @@ export default function Workspace() {
|
||||
<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) => (
|
||||
{Object.keys(columnLabels).map((colKey) => (
|
||||
<Droppable key={colKey} droppableId={colKey}>
|
||||
{(provided) => (
|
||||
<Card
|
||||
ref={provided.innerRef}
|
||||
{...provided.droppableProps}
|
||||
className="min-h-[220px] bg-muted/30"
|
||||
className="min-h-[220px] bg-background"
|
||||
>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
@@ -110,59 +120,55 @@ export default function Workspace() {
|
||||
index={index}
|
||||
>
|
||||
{(provided) => (
|
||||
<div
|
||||
<Card
|
||||
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"
|
||||
className="bg-background"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
{columns[colKey].length === 0 && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No tasks — try adding one!
|
||||
No tasks
|
||||
</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" };
|
||||
const t: Task = { id: id(), title: "New task" };
|
||||
setColumns((c) => ({
|
||||
...c,
|
||||
[colKey]: [t, ...c[colKey]],
|
||||
[colKey]: [...c[colKey], t],
|
||||
}));
|
||||
}}
|
||||
className="ml-auto"
|
||||
>
|
||||
Quick add
|
||||
Add
|
||||
</Button>
|
||||
</div>
|
||||
</CardFooter>
|
||||
|
||||
@@ -0,0 +1,63 @@
|
||||
export type Color =
|
||||
| "default"
|
||||
| "gray"
|
||||
| "brown"
|
||||
| "orange"
|
||||
| "yellow"
|
||||
| "green"
|
||||
| "blue"
|
||||
| "purple"
|
||||
| "pink"
|
||||
| "red";
|
||||
|
||||
interface ColorStyle {
|
||||
backgroundColor: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export function getColor(color: Color): ColorStyle {
|
||||
const colors: Record<Color, ColorStyle> = {
|
||||
default: {
|
||||
backgroundColor: "rgba(47, 52, 55, 0.27)",
|
||||
color: "#FFFFFF",
|
||||
},
|
||||
gray: {
|
||||
backgroundColor: "rgba(151, 154, 155, 0.27)",
|
||||
color: "#979A9B",
|
||||
},
|
||||
brown: {
|
||||
backgroundColor: "rgba(147, 114, 100, 0.27)",
|
||||
color: "#937264",
|
||||
},
|
||||
orange: {
|
||||
backgroundColor: "rgba(255, 163, 68, 0.27)",
|
||||
color: "#FFA344",
|
||||
},
|
||||
yellow: {
|
||||
backgroundColor: "rgba(255, 220, 73, 0.27)",
|
||||
color: "#FFDC49",
|
||||
},
|
||||
green: {
|
||||
backgroundColor: "rgba(77, 171, 154, 0.27)",
|
||||
color: "#4DAB9A",
|
||||
},
|
||||
blue: {
|
||||
backgroundColor: "rgba(82, 156, 202, 0.27)",
|
||||
color: "#529CCA",
|
||||
},
|
||||
purple: {
|
||||
backgroundColor: "rgba(154, 109, 215, 0.27)",
|
||||
color: "#9A6DD7",
|
||||
},
|
||||
pink: {
|
||||
backgroundColor: "rgba(226, 85, 161, 0.27)",
|
||||
color: "#E255A1",
|
||||
},
|
||||
red: {
|
||||
backgroundColor: "rgba(255, 115, 105, 0.27)",
|
||||
color: "#FF7369",
|
||||
},
|
||||
};
|
||||
|
||||
return colors[color];
|
||||
}
|
||||
Reference in New Issue
Block a user