81 lines
1.7 KiB
TypeScript
81 lines
1.7 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Column from "@/components/Column";
|
|
import AddTaskForm from "@/components/AddTaskForm";
|
|
|
|
export default function Dashboard() {
|
|
const [tasks, setTasks] = useState({
|
|
todo: [
|
|
{
|
|
title: "Finish lab",
|
|
description: "Complete physics lab report",
|
|
dueDate: "2026-08-10",
|
|
topic: "Physics",
|
|
},
|
|
{
|
|
title: "Study Next.js",
|
|
description: "Learn routing and layouts",
|
|
dueDate: "2026-08-08",
|
|
topic: "Coding",
|
|
},
|
|
],
|
|
inProgress: [],
|
|
done: [],
|
|
});
|
|
|
|
const [showForm, setShowForm] = useState(false);
|
|
|
|
const addTask = (task: any) => {
|
|
setTasks((prev) => ({
|
|
...prev,
|
|
todo: [...prev.todo, task],
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<main style={styles.container}>
|
|
<h1 style={styles.title}>Planner Danner</h1>
|
|
|
|
<div style={styles.board}>
|
|
<Column title="To Do" tasks={tasks.todo} onAdd={() => setShowForm(true)} />
|
|
<Column title="In Progress" tasks={tasks.inProgress} />
|
|
<Column title="Done" tasks={tasks.done} />
|
|
</div>
|
|
|
|
{showForm && (
|
|
<AddTaskForm
|
|
onSubmit={addTask}
|
|
onClose={() => setShowForm(false)}
|
|
/>
|
|
)}
|
|
</main>
|
|
);
|
|
}
|
|
|
|
const styles = {
|
|
container: {
|
|
minHeight: "100vh",
|
|
background: "linear-gradient(to bottom, #38bdf8, #0ea5e9)",
|
|
padding: "30px",
|
|
},
|
|
title: {
|
|
textAlign: "center" as const,
|
|
fontSize: "90px",
|
|
fontWeight: "900",
|
|
color: "white",
|
|
letterSpacing: "2px",
|
|
textShadow: `
|
|
0 4px 0 #0284c7,
|
|
0 8px 20px rgba(0,0,0,0.2)
|
|
`,
|
|
marginBottom: "30px",
|
|
},
|
|
board: {
|
|
display: "flex",
|
|
gap: "20px",
|
|
justifyContent: "center",
|
|
},
|
|
};
|
|
|