Evandro Fonseca JuniorandClaude Sonnet 5.5
a1a1e91135
- cards com moldura de navegador (endereco real) e brilho na cor do site no card que toca - um video por vez: o do card sob o mouse/foco, ou o mais perto do centro da tela; nada baixa antes de tocar, e um botao pausa os videos que se mexem sozinhos - janela ampliada em <dialog> nativo: troca computador/celular mantendo o ponto do site, capitulos clicaveis, controles proprios, setas entre projetos e foco devolvido ao fechar - dados e capitulos de cada projeto em lib/project-showcase.ts (substitui project-videos.ts) Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
26 lines
610 B
TypeScript
26 lines
610 B
TypeScript
import type { CSSProperties, ReactNode } from "react";
|
|
|
|
/** Moldura de celular para o vídeo mobile (proporção 390x844 do vídeo; o recorte da tela segue a mesma conta). */
|
|
export function PhoneFrame({
|
|
children,
|
|
poster,
|
|
className = "",
|
|
style,
|
|
}: {
|
|
children: ReactNode;
|
|
poster?: string;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
}) {
|
|
return (
|
|
<div className={`ds-phone ${className}`.trim()} style={style}>
|
|
<div
|
|
className="ds-phone-screen"
|
|
style={poster ? { backgroundImage: `url(${poster})` } : undefined}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|