import HoverPrefetchLink from "./HoverPrefetchLink"; export type ClientLink = { id: string; name: string; /** Ramo do cliente ("loja virtual"), sob o nome de 640 px em diante (lib/proof.ts). */ sector?: string; }; /** * Faixa "Já entregue para" do hero: só projetos de cliente (lib/proof.ts), cada um levando ao próprio case, e na * mesma linha os anos de experiência (calculados em app/page.tsx). Sem clientes e sem anos, nada é desenhado. * De 640 px em diante cada cliente é um par empilhado: o nome (link) sobre o ramo, em 13 px e apagado; abaixo disso, * só os nomes. Os links têm 44 px de altura de toque no celular e 24 px a partir de 640 px, onde o ramo divide a * altura do item; a rota só é pré-carregada quando a pessoa chega no link. Os pontos, o rótulo e os anos se alinham * pela linha dos nomes (`sm:items-start`). * * O ponto separador vem ANTES de cada item, menos do primeiro, e só aparece ENTRE itens da mesma linha. Cada item * (menos o primeiro) tem 16 px de margem negativa (`-ml-4`), que cobrem os 16 px de respiro (`pr-4`) do item * anterior, e é nesses 16 px que o ponto (`w-4`) fica. Quando a lista quebra e um item abre a linha seguinte, o * ponto dele cai na margem à esquerda da lista e o `overflow-x: clip` o esconde: nenhuma linha termina nem começa * com "·". O recuo de 4 px da lista (`-ml-1 pl-1`) só dá espaço ao contorno de foco do primeiro link (2 px de * contorno e 2 px de afastamento); o ponto, centrado na margem, fica 6 px além dele. */ export default function ClientStrip({ clients = [], years, className = "", }: { clients?: ClientLink[]; /** Anos de experiência, na mesma linha dos clientes. */ years?: number; className?: string; }) { if (clients.length === 0 && !years) return null; const items = [ ...clients.map((client) => ({ key: client.id, node: ( {client.name} {client.sector && ( {client.sector} )} ), })), ...(years ? [ { key: "years", node: (

{years} {" "} anos de experiência

), }, ] : []), ]; return (
{clients.length > 0 &&

Já entregue para:

} {/* de 640 px em diante a lista fica ao lado do rótulo enquanto sobram 24rem, e quebra por dentro; menos que isso, ela desce para baixo do rótulo e usa a largura toda */}
); }