Evandro Fonseca Junior
fc44a69fb3
/servicos abre com as 3 ofertas e depois outros serviços; H1 de criação de sites e de engenharia com o nome da oferta; capa de cada serviço pelo assunto (SEV fora do próprio case cai de ~11 para 2 imagens); diagrama de fluxo em SVG nos serviços sem case; cases com o que o cliente passou a poder fazer e contato logo depois de Como ficou; FAQ num componente só; lastmod por rota; ProfessionalService com areaServed.
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
import HoverPrefetchLink from "./HoverPrefetchLink";
|
|
|
|
/**
|
|
* Trilha de navegação sobre fundo escuro, no topo das páginas internas. O último item é a página atual.
|
|
* Os links só pré-carregam a rota quando a pessoa chega neles (HoverPrefetchLink).
|
|
* A barra vem depois de cada item, menos do último: quando a trilha não cabe numa linha (celular), a quebra cai
|
|
* depois da barra e a linha de baixo começa pelo nome, nunca por "/".
|
|
*/
|
|
export function Breadcrumb({
|
|
items,
|
|
}: {
|
|
items: readonly { label: string; href: string }[];
|
|
}) {
|
|
return (
|
|
<nav aria-label="Trilha de navegação" className="mb-sp-6">
|
|
<ol className="flex flex-wrap items-center gap-x-sp-2 gap-y-sp-1 text-[15px]">
|
|
{items.map(({ label, href }, index) => (
|
|
<li key={href} className="flex items-center gap-sp-2">
|
|
<HoverPrefetchLink
|
|
aria-current={index === items.length - 1 ? "page" : undefined}
|
|
className="ds-link ds-link-text"
|
|
href={href}
|
|
>
|
|
{label}
|
|
</HoverPrefetchLink>
|
|
{index < items.length - 1 ? (
|
|
<span aria-hidden="true">/</span>
|
|
) : null}
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</nav>
|
|
);
|
|
}
|