81 lines
3.6 KiB
TypeScript
Executable File
81 lines
3.6 KiB
TypeScript
Executable File
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useParams } from "next/navigation";
|
|
import { getCaseStudyBySlug } from "@/lib/data/mockCaseStudies";
|
|
import type { CourseLevel } from "@/types/course";
|
|
|
|
const levelBadgeClass = (level: CourseLevel) => {
|
|
if (level === "Beginner") return "bg-emerald-100 text-emerald-900 border border-emerald-200";
|
|
if (level === "Intermediate") return "bg-sky-100 text-sky-900 border border-sky-200";
|
|
return "bg-violet-100 text-violet-900 border border-violet-200";
|
|
};
|
|
|
|
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-page">
|
|
<header className="acve-panel acve-section-base">
|
|
<p className="text-sm font-semibold uppercase tracking-wide text-slate-500">{caseStudy.citation} ({caseStudy.year})</p>
|
|
<h1 className="mt-2 text-4xl font-semibold leading-tight text-[#1f2b3a] md:text-5xl">{caseStudy.title}</h1>
|
|
<div className="mt-3 flex flex-wrap items-center gap-2">
|
|
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">
|
|
Categoria: {caseStudy.category}
|
|
</span>
|
|
<span className="rounded-full border border-slate-300 bg-white px-3 py-1 text-xs font-semibold text-slate-700">
|
|
Dificultad: {caseStudy.difficulty}
|
|
</span>
|
|
<span className={`rounded-full px-3 py-1 text-xs font-semibold ${levelBadgeClass(caseStudy.level)}`}>Level: {caseStudy.level}</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section className="grid gap-4 lg:grid-cols-[1.35fr_0.8fr]">
|
|
<div className="acve-panel p-5">
|
|
<h2 className="text-2xl font-semibold text-[#232b39]">Resumen del caso</h2>
|
|
<p className="mt-2 text-base leading-relaxed text-slate-700 md:text-lg">{caseStudy.summaryEs}</p>
|
|
|
|
<h3 className="mt-5 text-lg font-semibold text-[#232b39]">Resultado Juridico</h3>
|
|
<p className="mt-2 rounded-lg border border-slate-200 bg-white px-3 py-3 text-sm leading-relaxed text-slate-700">
|
|
{caseStudy.legalOutcomeEs}
|
|
</p>
|
|
</div>
|
|
|
|
<aside className="acve-panel p-5">
|
|
<h2 className="text-lg font-semibold text-[#232b39]">Terminos Juridicos Fundamentales</h2>
|
|
<div className="mt-3 space-y-2">
|
|
{caseStudy.keyTerms.map((term) => (
|
|
<div key={term.term} className="rounded-xl border border-slate-200 bg-[#faf8f8] p-3">
|
|
<p className="text-base font-semibold text-brand">{term.term}</p>
|
|
<p className="mt-1 text-sm text-slate-600">{term.definitionEs}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<p className="mt-4 inline-flex rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-slate-700">
|
|
{caseStudy.quizPrompt}
|
|
</p>
|
|
</aside>
|
|
</section>
|
|
|
|
<section className="border-t border-slate-200 pt-1">
|
|
<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>
|
|
);
|
|
}
|