feat: adicionar browser e fallback do notebook

2026-08-30 23:42:31 -03:00
1 parent c66ff7fde6
commit b4a2b81d55
@@ -0,0 +1,172 @@
+"use client";
+
+import Image from "next/image";
+import type { NotebookProject } from "./notebookProjects";
+import type { NotebookFrame } from "./notebookTimeline";
+
+export type NotebookBrowserProps = {
+  projects: NotebookProject[];
+  activeIndex: number;
+  frame: Pick<
+    NotebookFrame,
+    "cursorVisible" | "cursorX" | "cursorY" | "cursorClicking"
+  >;
+  onSelectTab: (index: number) => void;
+};
+
+function clampIndex(index: number, length: number): number {
+  if (length < 1) return -1;
+  return Math.min(Math.max(index, 0), length - 1);
+}
+
+function toDomId(value: string): string {
+  return value.replace(/[^a-zA-Z0-9_-]/g, "-");
+}
+
+export default function NotebookBrowser({
+  projects,
+  activeIndex,
+  frame,
+  onSelectTab,
+}: NotebookBrowserProps) {
+  const selectedIndex = clampIndex(activeIndex, projects.length);
+  const selectedProject =
+    selectedIndex >= 0 ? projects[selectedIndex] : undefined;
+
+  function handleTabKeyDown(
+    event: React.KeyboardEvent<HTMLButtonElement>,
+    index: number,
+  ) {
+    if (projects.length < 1) return;
+
+    let nextIndex: number | null = null;
+    if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+      nextIndex = Math.min(index + 1, projects.length - 1);
+    } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+      nextIndex = Math.max(index - 1, 0);
+    } else if (event.key === "Home") {
+      nextIndex = 0;
+    } else if (event.key === "End") {
+      nextIndex = projects.length - 1;
+    }
+
+    if (nextIndex === null) return;
+    event.preventDefault();
+    onSelectTab(nextIndex);
+  }
+
+  if (!selectedProject) {
+    return (
+      <div
+        className="notebook-browser"
+        data-testid="notebook-browser"
+        data-empty
+      >
+        <p aria-live="polite">Nenhum projeto disponível para esta cena.</p>
+      </div>
+    );
+  }
+
+  const selectedId = toDomId(selectedProject.id);
+  const panelId = `notebook-panel-${selectedId}`;
+
+  return (
+    <div className="notebook-browser" data-testid="notebook-browser">
+      <div className="notebook-browser-bar" aria-hidden="true">
+        <span className="notebook-browser-dot" />
+        <span className="notebook-browser-dot" />
+        <span className="notebook-browser-dot" />
+        <span className="notebook-browser-address">
+          evandro.dev.br / projetos
+        </span>
+      </div>
+
+      <div className="notebook-browser-body">
+        <div className="notebook-browser-heading">
+          <span className="notebook-browser-eyebrow">Projetos em produção</span>
+          <span className="notebook-browser-counter">
+            {String(selectedIndex + 1).padStart(2, "0")} /{" "}
+            {String(projects.length).padStart(2, "0")}
+          </span>
+        </div>
+
+        <div
+          className="notebook-tablist"
+          role="tablist"
+          aria-label="Projetos em produção"
+        >
+          {projects.map((project, index) => {
+            const tabId = `notebook-tab-${toDomId(project.id)}`;
+            const isSelected = index === selectedIndex;
+
+            return (
+              <button
+                aria-controls={panelId}
+                aria-selected={isSelected}
+                className="notebook-tab"
+                id={tabId}
+                key={project.id}
+                onClick={() => onSelectTab(index)}
+                onKeyDown={(event) => handleTabKeyDown(event, index)}
+                role="tab"
+                tabIndex={isSelected ? 0 : -1}
+                type="button"
+              >
+                <span className="notebook-tab-number">
+                  {String(index + 1).padStart(2, "0")}
+                </span>
+                <span className="notebook-tab-title">{project.title}</span>
+              </button>
+            );
+          })}
+        </div>
+
+        <div
+          aria-labelledby={`notebook-tab-${selectedId}`}
+          className="notebook-panel"
+          id={panelId}
+          role="tabpanel"
+        >
+          <div className="notebook-panel-copy">
+            <h3>{selectedProject.title}</h3>
+            <p>{selectedProject.subtitle}</p>
+            <ul aria-label={`Tecnologias de ${selectedProject.title}`}>
+              {selectedProject.technologies.slice(0, 4).map((technology) => (
+                <li key={technology}>{technology}</li>
+              ))}
+            </ul>
+            <a
+              href={selectedProject.demoUrl}
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              Abrir projeto <span aria-hidden="true">↗</span>
+            </a>
+          </div>
+
+          <div className="notebook-screenshot-wrap">
+            <Image
+              alt={`Captura de tela de ${selectedProject.title}`}
+              className="notebook-screenshot"
+              fill
+              sizes="(min-width: 681px) 60vw, 100vw"
+              src={selectedProject.screenshotSrc}
+              unoptimized
+            />
+            {frame.cursorVisible ? (
+              <span
+                aria-hidden="true"
+                className={`notebook-cursor${frame.cursorClicking ? " is-clicking" : ""}`}
+                data-testid="notebook-cursor"
+                style={{
+                  left: `${frame.cursorX * 100}%`,
+                  top: `${frame.cursorY * 100}%`,
+                }}
+              />
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}