{loading ? 'Carregando exemplo...' : (framework?.exemplo ? 'Exemplo do framework' : 'Abrir no GitHub')}
diff --git a/components/ConnectionsDiagram.jsx b/components/ConnectionsDiagram.jsx
index 70a7e9a..81364ad 100644
--- a/components/ConnectionsDiagram.jsx
+++ b/components/ConnectionsDiagram.jsx
@@ -1,430 +1,750 @@
"use client";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
const FILTER_CATEGORIES = [
- { id: "All", name: "Todos", color: "#64748b" },
- { id: "Ground", name: "Terra (GND)", color: "#64748b" },
- { id: "Power", name: "Alimentação", color: "#ef4444" },
- { id: "RTC", name: "RTC", color: "#f59e0b" },
- { id: "GPIO", name: "GPIO", color: "#22c55e" },
- { id: "ADC", name: "ADC", color: "#ec4899" },
- { id: "DAC", name: "DAC", color: "#a855f7" },
- { id: "Touch", name: "Touch", color: "#06b6d4" },
- { id: "UART", name: "UART", color: "#3b82f6" },
- { id: "SPI", name: "SPI", color: "#ef4444" },
- { id: "I2C", name: "I2C", color: "#10b981" },
- { id: "PWM", name: "PWM", color: "#f97316" },
- { id: "USB", name: "USB", color: "#8b5cf6" },
- { id: "Clock", name: "Clock", color: "#eab308" },
- { id: "JTAG", name: "JTAG", color: "#8b5cf6" },
- { id: "Strapping", name: "Inicialização", color: "#dc2626" },
+ { id: "All", name: "Todos", color: "#64748b" },
+ { id: "Ground", name: "Terra (GND)", color: "#64748b" },
+ { id: "Power", name: "Alimentação", color: "#ef4444" },
+ { id: "RTC", name: "RTC", color: "#f59e0b" },
+ { id: "GPIO", name: "GPIO", color: "#22c55e" },
+ { id: "ADC", name: "ADC", color: "#ec4899" },
+ { id: "DAC", name: "DAC", color: "#a855f7" },
+ { id: "Touch", name: "Touch", color: "#06b6d4" },
+ { id: "UART", name: "UART", color: "#3b82f6" },
+ { id: "SPI", name: "SPI", color: "#ef4444" },
+ { id: "I2C", name: "I2C", color: "#10b981" },
+ { id: "PWM", name: "PWM", color: "#f97316" },
+ { id: "USB", name: "USB", color: "#8b5cf6" },
+ { id: "Clock", name: "Clock", color: "#eab308" },
+ { id: "JTAG", name: "JTAG", color: "#8b5cf6" },
+ { id: "Strapping", name: "Inicialização", color: "#dc2626" },
];
export default function ConnectionsDiagram({ connections, color }) {
- const [activeFilter, setActiveFilter] = useState("All");
- const [selectedConnection, setSelectedConnection] = useState(null);
- const [hoveredConnection, setHoveredConnection] = useState(null);
+ const [activeFilter, setActiveFilter] = useState("All");
+ const [selectedConnection, setSelectedConnection] = useState(null);
+ const [hoveredConnection, setHoveredConnection] = useState(null);
+ const [searchQuery, setSearchQuery] = useState("");
+ const [viewMode, setViewMode] = useState("grid"); // 'grid' or 'list'
+ const [showTooltip, setShowTooltip] = useState(null);
- const isConnectionVisible = (connection) => {
- if (activeFilter === "All") return true;
- return connection.categorias.includes(activeFilter);
- };
+ const isConnectionVisible = (connection) => {
+ const matchesFilter = activeFilter === "All" || connection.categorias.includes(activeFilter);
+ const matchesSearch = searchQuery === "" ||
+ connection.nome.toLowerCase().includes(searchQuery.toLowerCase()) ||
+ connection.numero.toString().toLowerCase().includes(searchQuery.toLowerCase());
+ return matchesFilter && matchesSearch;
+ };
- const getCategoryColor = (category) => {
- const filter = FILTER_CATEGORIES.find((f) => f.id === category);
- return filter?.color || "#64748b";
- };
+ const getCategoryColor = (category) => {
+ const filter = FILTER_CATEGORIES.find((f) => f.id === category);
+ return filter?.color || "#64748b";
+ };
- useEffect(() => {
- const handleEscape = (e) => {
- if (e.key === "Escape") setSelectedConnection(null);
- };
-
- if (selectedConnection) {
- document.addEventListener("keydown", handleEscape);
- document.body.style.overflow = "hidden";
- }
-
- return () => {
- document.removeEventListener("keydown", handleEscape);
- document.body.style.overflow = "unset";
- };
- }, [selectedConnection]);
+ const visibleConnections = useMemo(() => {
+ return connections.filter(isConnectionVisible);
+ }, [connections, activeFilter, searchQuery]);
- if (!connections || connections.length === 0) {
- return (
-
-
+ const activeCategories = useMemo(() => {
+ if (activeFilter === "All") return [];
+ return FILTER_CATEGORIES.filter(cat =>
+ visibleConnections.some(conn => conn.categorias.includes(cat.id))
+ );
+ }, [visibleConnections, activeFilter]);
-
- Diagrama de conexões indisponível
-
+ useEffect(() => {
+ const handleEscape = (e) => {
+ if (e.key === "Escape") {
+ setSelectedConnection(null);
+ setShowTooltip(null);
+ }
+ };
+
+ if (selectedConnection) {
+ document.addEventListener("keydown", handleEscape);
+ document.body.style.overflow = "hidden";
+ }
+
+ return () => {
+ document.removeEventListener("keydown", handleEscape);
+ document.body.style.overflow = "unset";
+ };
+ }, [selectedConnection]);
-
- Este modelo ainda não possui dados de conexão
-
-
- );
- }
+ useEffect(() => {
+ const handleKeyDown = (e) => {
+ if (selectedConnection) return;
+
+ if (e.key === "Tab") {
+ const buttons = document.querySelectorAll('[data-connection-button]');
+ const currentIndex = Array.from(buttons).findIndex(btn => btn === document.activeElement);
+
+ if (e.shiftKey && currentIndex > 0) {
+ e.preventDefault();
+ buttons[currentIndex - 1].focus();
+ } else if (!e.shiftKey && currentIndex < buttons.length - 1) {
+ e.preventDefault();
+ buttons[currentIndex + 1].focus();
+ }
+ }
+ };
- return (
-
-
-
- 📍
- Diagrama de Conexões Interativo
-
-
- Clique em qualquer conexão para ver informações detalhadas ou use filtros para destacar funções específicas.
-
-
+ document.addEventListener("keydown", handleKeyDown);
+ return () => document.removeEventListener("keydown", handleKeyDown);
+ }, [selectedConnection]);
-
-
-
+ if (!connections || connections.length === 0) {
+ return (
+
+
-
- Filtre por Função
-
+
+ Diagrama de conexões indisponível
+
- {activeFilter !== "All" && (
-
- {connections.filter(isConnectionVisible).length} de {connections.length} conexões
-
- )}
-
+
+ Este modelo ainda não possui dados de conexão
+
+
+ );
+ }
-
- {FILTER_CATEGORIES.map((filter) => {
- const isActive = activeFilter === filter.id;
- return (
-
- );
- })}
-
-
+ return (
+
+
+
+ 📍
+ Diagrama de Conexões Interativo
+
+
+ Explore as conexões do ESP32. Use a busca, filtros por função ou passe o mouse para ver detalhes rápidos.
+
+
-
-
- {connections.map((connection, index) => {
- const visible = isConnectionVisible(connection);
- const isHovered = hoveredConnection === index;
- return (
-
- );
- })}
-
-
+
+
+
- {connections.some(c => c.restricoes) && (
-
-
-
+
+ Filtre por Função
+
-
-
- Informações Importantes
-
-
- -
- •
-
- Conexões com ícones de aviso possuem restrições de uso. Clique para mais detalhes.
-
-
- -
- •
-
- Sempre consulte o datasheet oficial antes de usar conexões com funções especiais.
-
-
-
-
-
-
- )}
+
+ {visibleConnections.length} de {connections.length}
+
+
- {selectedConnection && (
-
setSelectedConnection(null)}
- role="dialog"
- aria-modal="true"
- aria-labelledby="modal-title"
- >
-
e.stopPropagation()}
- >
-
-
-
-
- {typeof selectedConnection.numero === "number"
- ? selectedConnection.numero
- : selectedConnection.numero.substring(0, 4)}
-
-
-
- {selectedConnection.nome}
-
-
- Conexão {selectedConnection.numero}
-
-
-
+
+ {FILTER_CATEGORIES.map((filter) => {
+ const isActive = activeFilter === filter.id;
+ const count = connections.filter(c =>
+ filter.id === "All" ? true : c.categorias.includes(filter.id)
+ ).length;
+
+ return (
+
+ );
+ })}
+
-
-
-
+ {activeFilter !== "All" && activeCategories.length > 0 && (
+
+
Categorias visíveis:
+
+ {activeCategories.map(cat => (
+
+
+ {cat.name}
+
+ ))}
+
+
+ )}
+
-
-
-
-
- Categorias
-
+ {visibleConnections.length === 0 ? (
+
+
+
Nenhuma conexão encontrada
+
Tente ajustar os filtros ou termo de busca
+
+
+ ) : viewMode === "grid" ? (
+
+
+ {visibleConnections.map((connection, index) => {
+ const isHovered = hoveredConnection === index;
+ const connectionId = `connection-${index}`;
+
+ return (
+
+
+
+ {connection.nome}
+
-
-
-
- Funções da Conexão
-
+
+ {connection.categorias.slice(0, 5).map((cat) => (
+
+ ))}
+ {connection.categorias.length > 5 && (
+
+ +{connection.categorias.length - 5}
+
+ )}
+
-
-
- {selectedConnection.funcoes.map((func, index) => (
- -
-
- {func}
-
- ))}
-
-
-
+ {connection.restricoes && (
+
+ )}
+
- {selectedConnection.restricoes && (
-
-
-
-
-
- Alertas Importantes
-
-
- {selectedConnection.restricoes}
-
-
-
-
- )}
-
+ {showTooltip === index && (
+
+ )}
+
+ );
+ })}
+
+
+ ) : (
+
+
+
+
+
+ | Pin |
+ Nome |
+ Categorias |
+ Funções |
+ Status |
+
+
+
+ {visibleConnections.map((connection, index) => (
+ setSelectedConnection(connection)}
+ className="hover:bg-gray-50 cursor-pointer transition-colors group"
+ >
+ |
+
+ {typeof connection.numero === "number"
+ ? connection.numero
+ : connection.numero.substring(0, 4)}
+
+ |
+
+
+ {connection.nome}
+
+ |
+
+
+ {connection.categorias.map((cat) => (
+
+ {cat === "Strapping" ? "Inicialização" : cat}
+
+ ))}
+
+ |
+
+
+ {connection.funcoes.join(", ")}
+
+ |
+
+ {connection.restricoes ? (
+
+
+ Atenção
+
+ ) : (
+
+
+ OK
+
+ )}
+ |
+
+ ))}
+
+
+
+
+ )}
-
-
-
-
-
- )}
+ {connections.some(c => c.restricoes) && (
+
+
+
-
-
Sobre a Matriz de Conexões Flexível
-
- 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 essa flexibilidade.
-
-
+
+
+ Informações Importantes
+
+
+ -
+ •
+
+ Conexões com ícones de aviso possuem restrições de uso. Clique para mais detalhes.
+
+
+ -
+ •
+
+ Sempre consulte o datasheet oficial antes de usar conexões com funções especiais.
+
+
+
+
+
+
+ )}
-
-
- );
+ {selectedConnection && (
+
setSelectedConnection(null)}
+ role="dialog"
+ aria-modal="true"
+ aria-labelledby="modal-title"
+ >
+
e.stopPropagation()}
+ >
+
+
+
+
+ {typeof selectedConnection.numero === "number"
+ ? selectedConnection.numero
+ : selectedConnection.numero.substring(0, 4)}
+
+
+
+ {selectedConnection.nome}
+
+
+ Conexão {selectedConnection.numero}
+
+
+
+
+
+
+
+
+
+
+
+
+ Categorias
+
+
+
+ {selectedConnection.categorias.map((cat) => (
+
+ {cat === "Strapping" ? "Inicialização" : cat}
+
+ ))}
+
+
+
+
+
+
+ Funções da Conexão
+
+
+
+
+ {selectedConnection.funcoes.map((func, index) => (
+ -
+
+ {func}
+
+ ))}
+
+
+
+
+ {selectedConnection.restricoes && (
+
+
+
+
+
+ Alertas Importantes
+
+
+ {selectedConnection.restricoes}
+
+
+
+
+ )}
+
+
+
+
+
+
+
+ )}
+
+
+
+
+ Sobre a Matriz de Conexões Flexível
+
+
+ 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 essa flexibilidade.
+
+
+
+
+
+ );
}
\ No newline at end of file
diff --git a/components/SeriesTabMenu.jsx b/components/SeriesTabMenu.jsx
index 3f5eea5..7aa41eb 100644
--- a/components/SeriesTabMenu.jsx
+++ b/components/SeriesTabMenu.jsx
@@ -15,7 +15,7 @@ export default function SeriesTabMenu({ tabs, color }) {