Redesign das páginas internas no novo design system (AAA) (#2)
* feat(design): redesign das páginas internas no novo design system Padroniza todas as páginas e componentes internos nos tokens e primitivos de app/globals.css, com contraste AAA (7:1) nos dois temas e alvos de toque de 44px. - Páginas reescritas: glossário, séries, série, seletor, comparador, diagnóstico, catálogo, component registry, frameworks, framework, sobre e a nova 404. - Componentes: PageHero e SectionHead novos; BoardCard, CodeExample, PinRestrictions, SeriesTabMenu e ConnectionsDiagram refeitos, com abas e diálogo acessíveis. - Remove emojis, cores avulsas por série, caixa alta com tracking, texto menor que 12px e os pares slate-*/dark:*. - Comparador: "mostrar só as diferenças" e leitura de ?chips=. - Corrige overflow em 320/390px e ajusta accent/copper do tema claro para fechar 7:1. - scripts/auditar-temas.mjs passa a travar paleta crua, dark:, texto pequeno, emoji e contraste dos tokens. Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc * ci: roda lint, auditorias de design e build em cada PR Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc --------- Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas Rayan GuerraandClaude Sonnet 5.5 authored and GitHub committed
1 parent
4f27f5858b
commit
bc9ae5c036
34 files changed
+4911
-6874
No files matched your search
@@ -1,11 +1,11 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { ChevronDown } from 'lucide-react';
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
export default function SeriesTabMenu({ tabs, color }) {
|
||||
const availableTabs = tabs.filter(tab => tab.available);
|
||||
const [activeTab, setActiveTab] = useState(availableTabs[0]?.id || 'specs');
|
||||
export default function SeriesTabMenu({ tabs }) {
|
||||
const availableTabs = tabs.filter((tab) => tab.available);
|
||||
const [activeTab, setActiveTab] = useState(availableTabs[0]?.id);
|
||||
const refs = useRef({});
|
||||
|
||||
// Troca manual limpa o hash. Sem isso, depois de abrir o diagrama pelo link e
|
||||
// mudar de aba na mão, o hash continuaria em #connections e um novo clique no
|
||||
@@ -13,7 +13,7 @@ export default function SeriesTabMenu({ tabs, color }) {
|
||||
const trocarAba = (id) => {
|
||||
setActiveTab(id);
|
||||
if (window.location.hash) {
|
||||
history.replaceState(null, '', window.location.pathname + window.location.search);
|
||||
history.replaceState(null, "", window.location.pathname + window.location.search);
|
||||
}
|
||||
};
|
||||
|
||||
@@ -21,93 +21,67 @@ export default function SeriesTabMenu({ tabs, color }) {
|
||||
// É o que permite a seção de restrições apontar para cá.
|
||||
useEffect(() => {
|
||||
const abrirPeloHash = () => {
|
||||
const alvo = window.location.hash.replace('#', '');
|
||||
if (alvo && availableTabs.some(t => t.id === alvo)) {
|
||||
const alvo = window.location.hash.replace("#", "");
|
||||
if (alvo && availableTabs.some((t) => t.id === alvo)) {
|
||||
setActiveTab(alvo);
|
||||
// Nenhum elemento tem id="connections", então o navegador não rola
|
||||
// sozinho: levamos até as abas na mão.
|
||||
const semAnimacao = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
document.getElementById('diagrama-abas')?.scrollIntoView({
|
||||
behavior: semAnimacao ? 'auto' : 'smooth',
|
||||
block: 'start',
|
||||
const semAnimacao = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
|
||||
document.getElementById("diagrama-abas")?.scrollIntoView({
|
||||
behavior: semAnimacao ? "auto" : "smooth",
|
||||
block: "start",
|
||||
});
|
||||
}
|
||||
};
|
||||
abrirPeloHash();
|
||||
window.addEventListener('hashchange', abrirPeloHash);
|
||||
return () => window.removeEventListener('hashchange', abrirPeloHash);
|
||||
window.addEventListener("hashchange", abrirPeloHash);
|
||||
return () => window.removeEventListener("hashchange", abrirPeloHash);
|
||||
}, [availableTabs]);
|
||||
|
||||
const activeTabContent = availableTabs.find(tab => tab.id === activeTab)?.content;
|
||||
// Setas, Home e End movem o foco entre as abas, como no padrão WAI-ARIA.
|
||||
const aoTeclar = (evento, indice) => {
|
||||
const total = availableTabs.length;
|
||||
const destino =
|
||||
evento.key === "ArrowRight" ? (indice + 1) % total
|
||||
: evento.key === "ArrowLeft" ? (indice - 1 + total) % total
|
||||
: evento.key === "Home" ? 0
|
||||
: evento.key === "End" ? total - 1
|
||||
: null;
|
||||
if (destino === null) return;
|
||||
evento.preventDefault();
|
||||
const id = availableTabs[destino].id;
|
||||
trocarAba(id);
|
||||
refs.current[id]?.focus();
|
||||
};
|
||||
|
||||
if (availableTabs.length === 0) return null;
|
||||
const ativa = availableTabs.find((tab) => tab.id === activeTab) ?? availableTabs[0];
|
||||
|
||||
return (
|
||||
<div className="mb-12" id="diagrama-abas">
|
||||
{/* Desktop Tabs */}
|
||||
<div className="hidden md:flex bg-white dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl shadow-xl py-2 px-3 mb-6 border border-slate-300 dark:border-slate-800/80 gap-3">
|
||||
{availableTabs.map((tab) => {
|
||||
const isActive = activeTab === tab.id;
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => trocarAba(tab.id)}
|
||||
className={`flex-1 flex items-center justify-center gap-2 py-3 px-5 rounded-xl font-bold text-xs uppercase tracking-wider transition-all duration-300 cursor-pointer active:scale-98 ${
|
||||
isActive
|
||||
? 'text-white shadow-lg scale-[1.02]'
|
||||
: 'text-slate-650 dark:text-slate-350 hover:bg-slate-100/50 dark:hover:bg-slate-800/40 hover:text-slate-800 dark:hover:text-slate-100'
|
||||
}`}
|
||||
style={
|
||||
isActive
|
||||
? { backgroundColor: color, boxShadow: `0 10px 20px -10px ${color}` }
|
||||
: {}
|
||||
}
|
||||
>
|
||||
<span>{tab.label}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Mobile Dropdown Tab Selector */}
|
||||
<div className="md:hidden mb-6">
|
||||
<div className="bg-white dark:bg-slate-900/40 backdrop-blur-xl rounded-2xl shadow-lg border border-slate-300 dark:border-slate-800/80 overflow-hidden">
|
||||
<div id="diagrama-abas" className="scroll-mt-28">
|
||||
<div role="tablist" aria-label="Placa e diagrama" className="no-scrollbar flex gap-2 overflow-x-auto pb-1">
|
||||
{availableTabs.map((tab, indice) => (
|
||||
<button
|
||||
onClick={() => {
|
||||
const dropdown = document.getElementById('mobile-tab-dropdown');
|
||||
dropdown.classList.toggle('hidden');
|
||||
}}
|
||||
className="w-full flex items-center justify-between py-4 px-6 font-bold text-sm uppercase tracking-wider text-white transition-all duration-300"
|
||||
style={{ backgroundColor: color }}
|
||||
key={tab.id}
|
||||
ref={(el) => (refs.current[tab.id] = el)}
|
||||
type="button"
|
||||
role="tab"
|
||||
id={`aba-${tab.id}`}
|
||||
aria-selected={ativa.id === tab.id}
|
||||
aria-controls={`painel-${tab.id}`}
|
||||
tabIndex={ativa.id === tab.id ? 0 : -1}
|
||||
onClick={() => trocarAba(tab.id)}
|
||||
onKeyDown={(e) => aoTeclar(e, indice)}
|
||||
className="chip-btn shrink-0"
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<span>
|
||||
{availableTabs.find(tab => tab.id === activeTab)?.label}
|
||||
</span>
|
||||
</div>
|
||||
<ChevronDown className="w-4 h-4 shrink-0 transition-transform duration-300" />
|
||||
{tab.label}
|
||||
</button>
|
||||
|
||||
<div id="mobile-tab-dropdown" className="hidden">
|
||||
{availableTabs.map((tab) => (
|
||||
tab.id !== activeTab && (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => {
|
||||
trocarAba(tab.id);
|
||||
document.getElementById('mobile-tab-dropdown').classList.add('hidden');
|
||||
}}
|
||||
className="w-full flex items-center gap-3 py-4 px-6 text-slate-700 dark:text-slate-300 hover:bg-slate-150/40 dark:hover:bg-slate-800/30 transition-colors border-t border-slate-300 dark:border-slate-800/60 font-semibold text-xs uppercase tracking-wider text-left"
|
||||
>
|
||||
<span>{tab.label}</span>
|
||||
</button>
|
||||
)
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="animate-fadeIn">
|
||||
{activeTabContent}
|
||||
<div role="tabpanel" id={`painel-${ativa.id}`} aria-labelledby={`aba-${ativa.id}`} className="mt-4">
|
||||
{ativa.content}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user