37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
|
"use client";
|
||
|
|
import { useState } from "react";
|
||
|
|
import Column from "./Column";
|
||
|
|
|
||
|
|
export default function Board() {
|
||
|
|
const [tasks, setTasks] = useState([
|
||
|
|
{ id: 1, title: "Task 1", description: "Do something", status: "Todo", dueDate: "2026-08-10", topic: "Lab" },
|
||
|
|
{ id: 2, title: "Task 2", description: "Another thing", status: "In-Progress", dueDate: "2026-08-12", topic: "Project" },
|
||
|
|
]);
|
||
|
|
|
||
|
|
const handleStatusChange = (taskId: number, newStatus: "Todo" | "In-Progress" | "Complete") => {
|
||
|
|
setTasks(prev =>
|
||
|
|
prev.map(t => (t.id === taskId ? { ...t, status: newStatus } : t))
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ display: "flex", gap: "20px" }}>
|
||
|
|
<Column
|
||
|
|
title="Todo"
|
||
|
|
tasks={tasks.filter(t => t.status === "Todo")}
|
||
|
|
onStatusChange={handleStatusChange}
|
||
|
|
/>
|
||
|
|
<Column
|
||
|
|
title="In-Progress"
|
||
|
|
tasks={tasks.filter(t => t.status === "In-Progress")}
|
||
|
|
onStatusChange={handleStatusChange}
|
||
|
|
/>
|
||
|
|
<Column
|
||
|
|
title="Complete"
|
||
|
|
tasks={tasks.filter(t => t.status === "Complete")}
|
||
|
|
onStatusChange={handleStatusChange}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|