60 lines
2.2 KiB
TypeScript
60 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useParams } from "next/navigation";
|
|
import { getCaseStudyBySlug } from "@/lib/data/mockCaseStudies";
|
|
|
|
export default function CaseStudyDetailPage() {
|
|
const params = useParams<{ slug: string }>();
|
|
const caseStudy = getCaseStudyBySlug(params.slug);
|
|
|
|
if (!caseStudy) {
|
|
return (
|
|
<div className="acve-panel p-6">
|
|
<h1 className="text-2xl font-bold text-slate-900">Case study not found</h1>
|
|
<p className="mt-2 text-slate-600">The requested case study slug does not exist in mock data.</p>
|
|
<Link className="acve-button-primary mt-4 inline-flex px-4 py-2 text-sm font-semibold" href="/case-studies">
|
|
Back to case studies
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<article className="acve-panel space-y-6 p-6">
|
|
<header className="space-y-2">
|
|
<p className="text-lg text-slate-500">
|
|
{caseStudy.citation} ({caseStudy.year})
|
|
</p>
|
|
<h1 className="acve-heading text-3xl md:text-6xl">{caseStudy.title}</h1>
|
|
<p className="text-base text-slate-600 md:text-2xl">
|
|
Topic: {caseStudy.topic} | Level: {caseStudy.level}
|
|
</p>
|
|
</header>
|
|
|
|
<section>
|
|
<h2 className="text-2xl text-[#232b39] md:text-4xl">Summary</h2>
|
|
<p className="mt-2 text-lg leading-relaxed text-slate-700 md:text-3xl">{caseStudy.summary}</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h2 className="text-2xl text-[#232b39] md:text-4xl">Key legal terms explained</h2>
|
|
<div className="mt-3 grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
|
{caseStudy.keyTerms.map((term, index) => (
|
|
<div key={term} className="rounded-xl border-l-4 border-accent bg-[#faf8f8] p-4">
|
|
<p className="text-xl font-semibold text-brand md:text-3xl">{term}</p>
|
|
<p className="mt-1 text-base text-slate-600 md:text-xl">Legal explanation block {index + 1}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
|
|
<section className="border-t border-slate-200 pt-5">
|
|
<Link className="acve-button-secondary inline-flex px-4 py-2 text-sm font-semibold hover:bg-brand-soft" href="/case-studies">
|
|
Back to Case Library
|
|
</Link>
|
|
</section>
|
|
</article>
|
|
);
|
|
}
|