63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
// Next.js Server Component (no 'use client' needed here)
|
|
// This page runs on the server, reads from SQLite directly, and renders HTML
|
|
|
|
import { getTasks } from '@/src/lib/tasks';
|
|
import TaskForm from '@/src/lib/components/TaskForm';
|
|
import TaskCard from '@/src/lib/components/TaskCard';
|
|
import TaskFilterToolbar from '@/src/lib/components/TaskFilterToolbar';
|
|
|
|
// Next.js 15 page props for async searchParams
|
|
interface PageProps {
|
|
searchParams: Promise<{ sortBy?: 'due_date' | 'topic' | 'status' }>;
|
|
}
|
|
|
|
export default async function HomePage({ searchParams }: PageProps) {
|
|
// Await search parameters from the URL (e.g., ?sortBy=topic)
|
|
const params = await searchParams;
|
|
const sortBy = params.sortBy || 'due_date';
|
|
|
|
// Direct SQLite query on the server to get active tasks sorted
|
|
const tasks = getTasks(sortBy);
|
|
|
|
return (
|
|
<main className="max-w-4xl mx-auto py-10 px-4 space-y-8 min-h-screen bg-zinc-50 dark:bg-zinc-950 text-zinc-900 dark:text-zinc-100">
|
|
{/* Header */}
|
|
<header className="space-y-1">
|
|
<h1 className="text-3xl font-bold tracking-tight text-zinc-900 dark:text-zinc-100">
|
|
📝 Todo App
|
|
</h1>
|
|
<p className="text-sm text-zinc-500 dark:text-zinc-400">
|
|
Local-first SQLite task manager with dynamic overdue detection.
|
|
</p>
|
|
</header>
|
|
|
|
{/* Task Creation Form */}
|
|
<TaskForm />
|
|
|
|
{/* Task Sorting Toolbar */}
|
|
<TaskFilterToolbar />
|
|
|
|
{/* List of Tasks */}
|
|
<section className="space-y-4">
|
|
<h2 className="text-lg font-semibold text-zinc-800 dark:text-zinc-200">
|
|
Tasks ({tasks.length})
|
|
</h2>
|
|
|
|
{/* Empty state if no tasks exist */}
|
|
{tasks.length === 0 ? (
|
|
<div className="text-center py-12 border border-dashed rounded-xl border-zinc-300 dark:border-zinc-800">
|
|
<p className="text-zinc-500 dark:text-zinc-400">No active tasks found. Create one above!</p>
|
|
</div>
|
|
) : (
|
|
/* Render grid of task cards */
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{tasks.map(task => (
|
|
<TaskCard key={task.id} task={task} />
|
|
))}
|
|
</div>
|
|
)}
|
|
</section>
|
|
</main>
|
|
);
|
|
}
|