feat(projects): capa nos cards de projeto (captura real ou painel gerado em codigo)

- ProjectCover usa as capturas ja publicadas (next/image, webp/avif) e, sem captura, um painel com monograma e stack - .ds-cover mantem proporcao 16:10 e nao encolhe no card flex Co-Authored-By: Claude Sonnet 5.5 <[email protected]>
2026-10-04 23:40:25 -03:00
1 parent e008a7c241
commit d5f04162a8
@@ -0,0 +1,52 @@
+import Image from "next/image";
+import { SCREENSHOT_BY_PROJECT_ID } from "./story/notebookProjects";
+
+type CoverProject = { id: string; title: string };
+
+const SCREENSHOTS: Record<string, string | undefined> =
+  SCREENSHOT_BY_PROJECT_ID;
+
+function initials(title: string) {
+  return title
+    .split(/\s+/)
+    .filter((word) => word.length > 2 || /^[A-Z]/.test(word))
+    .slice(0, 2)
+    .map((word) => word[0])
+    .join("")
+    .toUpperCase();
+}
+
+/**
+ * Capa do card de projeto: a captura de tela real quando existe; sem captura, um painel gerado em código
+ * (só o monograma, sem repetir a stack que já aparece nas tags do card) em vez de uma imagem inventada.
+ */
+export function ProjectCover({
+  project,
+  priority = false,
+}: {
+  project: CoverProject;
+  priority?: boolean;
+}) {
+  const src = SCREENSHOTS[project.id];
+
+  if (src) {
+    return (
+      <div className="ds-cover">
+        <Image
+          src={src}
+          alt={`Captura de tela de ${project.title}`}
+          width={1600}
+          height={1000}
+          sizes="(min-width: 1360px) 33vw, (min-width: 1025px) 50vw, 100vw"
+          priority={priority}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="ds-cover ds-cover-fallback" aria-hidden="true">
+      <span className="ds-cover-mark">{initials(project.title)}</span>
+    </div>
+  );
+}