Evandro Fonseca Junior
6ac87824f3
Legenda do mergulho até Projetos cobrir a cena; transição de página sem blur e com fundo escuro; foco no conteúdo ao trocar de página; listas com marcador e dois pesos de título; vídeos da SEV e da SC Plus regravados sem quadros brancos; scrub a 12-15 fps (-30%); vitrine com uma parada de Tab e setas, contador no celular e CSS sob demanda; âncoras num módulo só (fragment-nav); FramePulse com setInterval; CSS morto removido.
61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import Link from "next/link";
|
|
import type { ShowcaseItem } from "./ShowcaseProvider";
|
|
|
|
/** O site publicado abre em nova aba quando existe e não foi dado como fora do ar. */
|
|
export function canOpenSite(project: ShowcaseItem["project"]) {
|
|
return Boolean(project.demoUrl) && project.demoAvailability !== "unavailable";
|
|
}
|
|
|
|
/**
|
|
* Ações de um projeto na vitrine: "Ver case" (contorno) leva ao estudo de caso; "Ampliar vídeo" (contorno,
|
|
* com ícone) abre a janela ampliada; "Abrir site" (link de texto, nova aba) só existe com `demoUrl`.
|
|
* Nenhuma é verde-limão: o preenchido de destaque é só da ação de contato.
|
|
*/
|
|
export function ProjectActions({
|
|
item,
|
|
onExpand,
|
|
}: {
|
|
item: ShowcaseItem;
|
|
/** Sem a janela ampliada (antes de o navegador montar a página) o botão nem aparece. */
|
|
onExpand?: () => void;
|
|
}) {
|
|
const { project } = item;
|
|
return (
|
|
<div className="ds-reel-actions">
|
|
<Link className="ds-link ds-link-muted" href={`/cases/${project.id}`}>
|
|
Ver case
|
|
<span className="sr-only"> de {project.title}</span>
|
|
</Link>
|
|
{onExpand && (
|
|
<button
|
|
type="button"
|
|
className="ds-link ds-link-muted ds-reel-expand"
|
|
onClick={onExpand}
|
|
aria-haspopup="dialog"
|
|
>
|
|
<svg viewBox="0 0 16 16" aria-hidden="true">
|
|
<path d="M9.5 2.5h4v4M6.5 13.5h-4v-4M13.5 2.5 9 7M2.5 13.5 7 9" />
|
|
</svg>
|
|
{/* no celular o botão é só o ícone (CSS): o rótulo continua para o leitor de tela */}
|
|
<span className="ds-reel-expand-label">Ampliar vídeo</span>
|
|
<span className="sr-only"> de {project.title}</span>
|
|
</button>
|
|
)}
|
|
{canOpenSite(project) && (
|
|
<a
|
|
className="ds-link ds-link-text"
|
|
href={project.demoUrl ?? undefined}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
Abrir site
|
|
<span className="sr-only">
|
|
{" "}
|
|
de {project.title} (abre em nova aba)
|
|
</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|