Project Detail

1// Project detail — thin view over useProjectDetail (all data logic lives in the hook). Renders the
2// header, the details[] rows (text OR link), and the media gallery (each item via ProjectMedia,
3// which branches on item.type). Styled with base44 design tokens (shadcn Tailwind classes).
4import { useParams } from "react-router-dom";
5import { useProjectDetail } from "@/hooks/useProjectDetail";
6import ProjectMedia from "@/components/ProjectMedia";
7
8export default function ProjectDetail() {
9  const { slug } = useParams();
10  const { project, notFound, items } = useProjectDetail(slug);
11
12  if (notFound) return <Centered>Project not found.</Centered>;
13  if (!project) return <Centered>Loading…</Centered>;
14
15  const details = project.details || [];
16  return (
17    <main className="max-w-[1200px] mx-auto p-4">
18      <header className="mb-6">
19        <h1 className="font-display m-0 mb-2">{project.title}</h1>
20        {project.description && (
21          <p className="text-muted-foreground leading-relaxed m-0">{project.description}</p>
22        )}
23      </header>
24
25      {/* details[] row: { label, text? } OR { label, link: { text, url, target } } */}
26      {details.length > 0 && (
27        <dl className="grid [grid-template-columns:auto_1fr] gap-x-6 gap-y-2 m-0 mb-8 items-baseline">
28          {details.map((d, i) => (
29            <div key={i} className="contents">
30              <dt className="text-muted-foreground text-sm">{d.label}</dt>
31              <dd className="m-0">
32                {d.link
33                  ? <a href={d.link.url} target={d.link.target} rel="noopener"
34                      className="text-primary">{d.link.text}</a>
35                  : d.text}
36              </dd>
37            </div>
38          ))}
39        </dl>
40      )}
41
42      <div className="flex flex-col gap-4">
43        {items.map((item) => (
44          <figure key={item.id} className="m-0">
45            {item.link
46              ? <a href={item.link.url} target={item.link.target} rel="noopener"><ProjectMedia item={item} /></a>
47              : <ProjectMedia item={item} />}
48            {item.title && (
49              <figcaption className="text-muted-foreground text-sm mt-1.5">{item.title}</figcaption>
50            )}
51          </figure>
52        ))}
53      </div>
54    </main>
55  );
56}
57
58function Centered({ children }) {
59  return <div className="p-12 text-center text-muted-foreground">{children}</div>;
60}