91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import Link from 'next/link';
|
|
import { NotebookCard } from '@/components/NotebookCard';
|
|
import { SearchBar } from '@/components/SearchBar';
|
|
import { Header } from '@/components/Header';
|
|
|
|
interface NotebookData {
|
|
id: string;
|
|
title: string;
|
|
description: string | null;
|
|
coverColor: string;
|
|
updatedAt: string;
|
|
_count: { notes: number };
|
|
}
|
|
|
|
export default function NotebooksPage() {
|
|
const [notebooks, setNotebooks] = useState<NotebookData[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
fetch('/api/notebooks')
|
|
.then((res) => res.json())
|
|
.then(setNotebooks)
|
|
.catch(console.error)
|
|
.finally(() => setLoading(false));
|
|
}, []);
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#0a0a0a]">
|
|
<Header
|
|
breadcrumbs={[{ label: 'Notebooks' }]}
|
|
actions={
|
|
<>
|
|
<div className="hidden md:block w-64">
|
|
<SearchBar />
|
|
</div>
|
|
<Link
|
|
href="/notebooks/new"
|
|
className="px-3 md:px-4 py-2 bg-amber-500 hover:bg-amber-400 text-black text-sm font-medium rounded-lg transition-colors"
|
|
>
|
|
<span className="hidden sm:inline">New Notebook</span>
|
|
<svg className="w-4 h-4 sm:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
|
</Link>
|
|
</>
|
|
}
|
|
/>
|
|
{/* Mobile search */}
|
|
<div className="md:hidden px-4 py-3 border-b border-slate-800">
|
|
<SearchBar />
|
|
</div>
|
|
|
|
<main className="max-w-6xl mx-auto px-4 md:px-6 py-6 md:py-8">
|
|
{loading ? (
|
|
<div className="flex items-center justify-center py-20">
|
|
<svg className="animate-spin h-8 w-8 text-amber-400" viewBox="0 0 24 24">
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
|
|
</svg>
|
|
</div>
|
|
) : notebooks.length === 0 ? (
|
|
<div className="text-center py-20">
|
|
<p className="text-slate-400 mb-4">No notebooks yet. Create your first one!</p>
|
|
<Link
|
|
href="/notebooks/new"
|
|
className="inline-flex px-6 py-3 bg-amber-500 hover:bg-amber-400 text-black font-semibold rounded-lg transition-colors"
|
|
>
|
|
Create Notebook
|
|
</Link>
|
|
</div>
|
|
) : (
|
|
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-3 md:gap-4">
|
|
{notebooks.map((nb) => (
|
|
<NotebookCard
|
|
key={nb.id}
|
|
id={nb.id}
|
|
title={nb.title}
|
|
description={nb.description}
|
|
coverColor={nb.coverColor}
|
|
noteCount={nb._count.notes}
|
|
updatedAt={nb.updatedAt}
|
|
/>
|
|
))}
|
|
</div>
|
|
)}
|
|
</main>
|
|
</div>
|
|
);
|
|
}
|