53 lines
1.9 KiB
TypeScript
53 lines
1.9 KiB
TypeScript
import { textLink } from "@/app/components/button-styles";
|
|
import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
|
|
import { buttonLabels, type CaseStudyContent } from "@/lib/site-content";
|
|
|
|
/**
|
|
* Bloco menor depois de "Onde já apliquei isso": trabalhos parecidos que não são a prova principal do serviço, em uma linha
|
|
* cada (nome, por que interessam e o link do case), sem capa. Sem case, não mostra nada.
|
|
*/
|
|
export function ServiceAlsoCases({
|
|
title,
|
|
cases,
|
|
relevance,
|
|
}: {
|
|
title: string;
|
|
cases: readonly CaseStudyContent[];
|
|
/** Por que cada case interessa ao serviço (chave: id do case); sem frase própria, vale o resumo do case. */
|
|
relevance: Readonly<Record<string, string>>;
|
|
}) {
|
|
if (cases.length === 0) return null;
|
|
|
|
return (
|
|
<section className="ds-section" aria-labelledby="tambem-faco-titulo">
|
|
<div className="ds-section-shell">
|
|
<h2 id="tambem-faco-titulo" className="ds-card-title !mt-0">
|
|
{title}
|
|
</h2>
|
|
<ul className="mt-sp-6 divide-y divide-[var(--border)] border-y border-[var(--border)]">
|
|
{cases.map((caseStudy) => (
|
|
<li
|
|
key={caseStudy.id}
|
|
className="grid items-start gap-sp-3 py-sp-5 md:grid-cols-[minmax(0,1fr)_minmax(0,2fr)_auto] md:gap-sp-8"
|
|
>
|
|
<h3 className="text-base font-semibold leading-6">
|
|
{caseStudy.title}
|
|
</h3>
|
|
<p className="ds-copy !mt-0">
|
|
{relevance[caseStudy.id] ?? caseStudy.summary}
|
|
</p>
|
|
<HoverPrefetchLink
|
|
href={`/cases/${caseStudy.id}`}
|
|
className={`${textLink} focus-visible:outline-2 focus-visible:outline-offset-4`}
|
|
>
|
|
{buttonLabels.case}
|
|
<span className="sr-only"> {caseStudy.title}</span>
|
|
</HoverPrefetchLink>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|