Refactor: padroniza schema de conexões e atualiza UI do diagrama + melhorias na página de série
- Padroniza JSON de conexões (vários chips): normaliza "numero", unifica categorias, substitui "restricoes" por "avisos" (array), adiciona "alimentacao" e revisa campos de tipo/funcões/avisos. - Atualiza large conjunto de arquivos em public/conexoes (ESP32, ESP32-S2/S3/C3/C5/C6/H2/P4) para o novo formato e dados mais completos. - Adapta ConnectionsDiagram.jsx ao novo schema: - atualiza FILTER_CATEGORIES e type_colors; - usa cores por tipo (type_colors) para background/bordas/indicadores; - renomeia/exibe avisos, altera labels (ex: "Conexão" → "Pino"), melhora renderização de badges e contadores; - refina modal (overlay, classes, exibição de categorias, seção de alimentação e lista de avisos). - Altera page de série (app/series/[key]/page.jsx): - adiciona bloco "Sobre a Matriz de Conexões Flexível"; - adiciona links rápidos: Datasheet, Guia de Programação e (condicional) Manual Técnico; - ajusta estilos de botões/grades e espaçamento (md:mx-8); - simplifica previous/next (retorna null em vez de placeholders vazios). - Atualiza public/series.json com links de manual/guia, correções de specs (GPIO, temperaturas, descrições) e outras metadatas. Resultados: dados de conexões padronizados, componente de diagrama consistente com o novo schema, melhor UX na página de série e acesso direto a documentação.
This commit is contained in:
Lucas Rayan committed
1 parent
941dd266a0
commit
e169e29d0d
11 files changed
+5139
-3433
No files matched your search
+49
-16
@@ -82,6 +82,23 @@ export default async function SerieDetail({ params }) {
|
||||
content: (
|
||||
<div className="bg-white rounded-3xl shadow-xl p-8 border-2 border-gray-100">
|
||||
<ConnectionsDiagram connections={conexoes} color={serie.cor} />
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-lg p-6 border-2 border-gray-100">
|
||||
<h3 className="text-lg font-bold text-gray-800 mb-3 flex items-center gap-2">
|
||||
<svg className="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
|
||||
</svg>
|
||||
Sobre a Matriz de Conexões Flexível
|
||||
</h3>
|
||||
<p className="text-gray-700 leading-relaxed">
|
||||
O ESP32 possui uma matriz de conexões flexível que permite mapear diversas funções para múltiplos pinos.
|
||||
Isso significa que muitas conexões podem ser configuradas para desempenhar diferentes papéis, dependendo das necessidades do seu projeto.
|
||||
Consulte a documentação oficial para entender como aproveitar ao máximo as GPIOs
|
||||
<a href={`https://docs.espressif.com/projects/esp-idf/en/latest/${String(key).toLowerCase().replace("-", "")}/api-reference/peripherals/gpio.html`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:underline">
|
||||
nesse link.
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
@@ -166,14 +183,34 @@ export default async function SerieDetail({ params }) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a
|
||||
href={serie.datasheet}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-linear-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
📄 Datasheet Oficial
|
||||
</a>
|
||||
<div className="grid gap-3 mx-auto md:mx-0">
|
||||
<a
|
||||
href={serie.datasheet}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-blue-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
📄 Datasheet Oficial
|
||||
</a>
|
||||
|
||||
<a
|
||||
href={serie.guia_de_programacao}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-green-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
💻 Guia de Programação
|
||||
</a>
|
||||
|
||||
{serie.manual_tecnico && <a
|
||||
href={serie.manual_tecnico}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="inline-flex items-center gap-2 bg-purple-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
|
||||
>
|
||||
📖 Manual Técnico
|
||||
</a>}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-lg text-gray-700 mt-6 leading-relaxed">
|
||||
@@ -204,7 +241,7 @@ export default async function SerieDetail({ params }) {
|
||||
|
||||
<SeriesTabMenu tabs={tabs} color={serie.cor} />
|
||||
|
||||
<div className="grid sm:flex sm:justify-between items-center gap-4 mt-12">
|
||||
<div className="grid sm:flex sm:justify-between items-center gap-4 mt-12 md:mx-8">
|
||||
{previousKey ? (
|
||||
<Link
|
||||
href={`/series/${previousKey}`}
|
||||
@@ -216,10 +253,8 @@ export default async function SerieDetail({ params }) {
|
||||
<p className="font-semibold text-gray-800">{previousKey}</p>
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
|
||||
) : null}
|
||||
|
||||
<Link
|
||||
href="/comparacao"
|
||||
className="bg-linear-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold shadow-lg hover:shadow-xl transform hover:-translate-y-1 transition-all duration-300"
|
||||
@@ -238,9 +273,7 @@ export default async function SerieDetail({ params }) {
|
||||
</div>
|
||||
<span>→</span>
|
||||
</Link>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
) : null}
|
||||
</div>
|
||||
</main>
|
||||
|
||||
|
||||
Reference in new issue
Block a user