Collection Page

1// Collection page — collection header + its project grid (paged). Thin view over
2// useCollectionProjects (all data logic lives in the hook). Styled with base44 design tokens (shadcn Tailwind classes).
3import { useParams } from "react-router-dom";
4import { useCollectionProjects } from "@/hooks/useCollectionProjects";
5import ProjectGrid from "@/components/ProjectGrid";
6
7export default function CollectionPage() {
8  const { slug } = useParams();
9  const { collection, notFound, projects, cursor, loadMore } = useCollectionProjects(slug, { limit: 24 });
10
11  if (notFound) return <Centered>Collection not found.</Centered>;
12  if (!collection) return <Centered>Loading…</Centered>;
13
14  return (
15    <main className="max-w-[1200px] mx-auto p-4">
16      <header className="mb-6">
17        <h1 className="font-display m-0 mb-2">{collection.title}</h1>
18        {collection.description && (
19          <p className="text-muted-foreground leading-relaxed m-0">{collection.description}</p>
20        )}
21      </header>
22      {projects === null
23        ? <p className="text-muted-foreground">Loading…</p>
24        : <ProjectGrid projects={projects} empty="No projects in this collection yet." />}
25      {cursor && (
26        <div className="flex justify-center mt-6">
27          <button onClick={loadMore}
28            className="px-6 py-2.5 cursor-pointer bg-primary text-primary-foreground border-none rounded-sm text-[15px] font-semibold">
29            Load more
30          </button>
31        </div>
32      )}
33    </main>
34  );
35}
36
37function Centered({ children }) {
38  return <div className="p-12 text-center text-muted-foreground">{children}</div>;
39}