Update package dependencies, add energy consumption data to series.json, and create a technical glossary page
This commit is contained in:
Lucas Rayan committed
1 parent
2871877d44
commit
09fa8079fd
13 files changed
+1685
-893
No files matched your search
@@ -34,7 +34,7 @@ const type_colors = {
|
||||
nc: "#9ca3af",
|
||||
};
|
||||
|
||||
export default function ConnectionsDiagram({ connections, color }) {
|
||||
export default function ConnectionsDiagram({ connections, serie }) {
|
||||
const [activeFilter, setActiveFilter] = useState("All");
|
||||
const [selectedConnection, setSelectedConnection] = useState(null);
|
||||
const [hoveredConnection, setHoveredConnection] = useState(null);
|
||||
@@ -138,12 +138,12 @@ export default function ConnectionsDiagram({ connections, color }) {
|
||||
return (
|
||||
<div className="space-y-8 pb-8">
|
||||
<div className="space-y-3">
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b-2 flex items-center gap-3" style={{ borderColor: color }}>
|
||||
<h2 className="text-2xl font-bold text-gray-800 mb-6 pb-3 border-b-2 flex items-center gap-3" style={{ borderColor: serie.color }}>
|
||||
<span>📍</span>
|
||||
Diagrama de Conexões Interativo
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 leading-relaxed max-w-3xl">
|
||||
Explore as conexões do ESP32. Use a busca, filtros por função ou passe o mouse para ver detalhes rápidos.
|
||||
<p className="text-lg text-gray-600 leading-relaxed">
|
||||
Explore as conexões do {serie.nome_completo}. Use a busca, filtros por função ou passe o mouse para ver detalhes rápidos.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
+72
-20
@@ -16,20 +16,24 @@ import ModelsIcon from "@mui/icons-material/Memory";
|
||||
import FrameworksIcon from "@mui/icons-material/Apps";
|
||||
import CompareIcon from "@mui/icons-material/CompareArrows";
|
||||
import ShoppingCartIcon from "@mui/icons-material/ShoppingCart";
|
||||
import MenuBookIcon from "@mui/icons-material/MenuBook";
|
||||
|
||||
export default function Header() {
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
|
||||
const pathname = usePathname();
|
||||
const menuItems = [
|
||||
{ text: "Início", href: "/", icon: <HomeIcon /> },
|
||||
{ text: "Sobre o Projeto", href: "/sobre", icon: <AboutIcon /> },
|
||||
{ text: "Séries", href: "/series", icon: <ModelsIcon /> },
|
||||
{ text: "Frameworks", href: "/frameworks", icon: <FrameworksIcon /> },
|
||||
{ text: "Comparar Séries", href: "/comparacao", icon: <CompareIcon /> },
|
||||
{ text: "Catálogo de Placas", href: "/catalogo", icon: <ShoppingCartIcon /> },
|
||||
{ text: "Início", href: "/", icon: <HomeIcon />, featured: true },
|
||||
{ text: "Sobre o Projeto", brief: "Sobre", href: "/sobre", icon: <AboutIcon /> },
|
||||
{ text: "Glossário", href: "/glossario", icon: <MenuBookIcon /> },
|
||||
{ text: "Séries", href: "/series", icon: <ModelsIcon />, featured: true },
|
||||
{ text: "Frameworks", href: "/frameworks", icon: <FrameworksIcon />, featured: true },
|
||||
{ text: "Comparar Séries", brief: "Comparar", href: "/comparacao", icon: <CompareIcon />, featured: true },
|
||||
{ text: "Catálogo de Placas", brief: "Catálogo", href: "/catalogo", icon: <ShoppingCartIcon /> },
|
||||
];
|
||||
|
||||
const featuredItems = menuItems.filter(item => item.featured);
|
||||
|
||||
function isActive(href) {
|
||||
if (href === "/") {
|
||||
return pathname === "/";
|
||||
@@ -40,29 +44,70 @@ export default function Header() {
|
||||
|
||||
return (
|
||||
<header className="bg-white/80 backdrop-blur-md py-4 px-4 md:px-8 text-black shadow-lg border-b border-gray-100 sticky top-0 z-50">
|
||||
<div className="flex justify-between max-w-5xl mx-auto items-center">
|
||||
<Link href="/" className="group">
|
||||
<div className="flex justify-between max-w-7xl mx-auto items-center gap-8">
|
||||
<Link href="/" className="group shrink-0">
|
||||
<h1 className="text-2xl md:text-3xl font-bold bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent transition-all duration-300 group-hover:scale-105">
|
||||
ESPDocs
|
||||
</h1>
|
||||
</Link>
|
||||
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
className="border-2 border-gray-300 text-gray-700 hover:border-purple-500 hover:text-purple-600 transition-all duration-300 hover:shadow-lg rounded-xl! px-4"
|
||||
>
|
||||
<MenuIcon className="" />
|
||||
</Button>
|
||||
{/* Menu Desktop - visível em telas médias e grandes */}
|
||||
<nav className="hidden lg:flex items-center gap-2 flex-1 justify-end" aria-label="Menu principal">
|
||||
{featuredItems.map((item) => (
|
||||
<Link
|
||||
key={item.text}
|
||||
href={item.href}
|
||||
className={`group flex items-center gap-2 px-4 py-2.5 rounded-xl font-medium transition-all duration-300 ${
|
||||
isActive(item.href)
|
||||
? "bg-linear-to-r from-blue-600 to-purple-600 text-white shadow-lg shadow-purple-200"
|
||||
: "text-gray-700 hover:bg-linear-to-r hover:from-blue-50 hover:to-purple-50 hover:shadow-md hover:-translate-y-0.5"
|
||||
}`}
|
||||
aria-label={item.brief || item.text}
|
||||
aria-current={isActive(item.href) ? "page" : undefined}
|
||||
>
|
||||
<span className={`transition-transform duration-300 ${
|
||||
isActive(item.href) ? "scale-110" : "group-hover:scale-110"
|
||||
}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span className="text-sm whitespace-nowrap">{item.brief || item.text}</span>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
{/* Botão Menu Completo Desktop */}
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
className="border-2 border-gray-300 text-gray-700 hover:border-purple-500 hover:text-purple-600 transition-all duration-300 hover:shadow-lg rounded-xl! px-4"
|
||||
aria-label="Abrir menu completo"
|
||||
aria-expanded={drawerOpen}
|
||||
aria-controls="mobile-menu-drawer"
|
||||
>
|
||||
<MenuIcon />
|
||||
</Button>
|
||||
</nav>
|
||||
|
||||
{/* Botão Menu Mobile - visível apenas em telas pequenas */}
|
||||
<div className="lg:hidden">
|
||||
<Button
|
||||
variant="outlined"
|
||||
onClick={() => setDrawerOpen(true)}
|
||||
className="border-2 border-gray-300 text-gray-700 hover:border-purple-500 hover:text-purple-600 transition-all duration-300 hover:shadow-lg rounded-xl! px-4"
|
||||
aria-label="Abrir menu de navegação"
|
||||
aria-expanded={drawerOpen}
|
||||
aria-controls="mobile-menu-drawer"
|
||||
>
|
||||
<MenuIcon />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Drawer Mobile */}
|
||||
<Drawer
|
||||
anchor="right"
|
||||
open={drawerOpen}
|
||||
onClose={() => setDrawerOpen(false)}
|
||||
PaperProps={{
|
||||
className: "bg-linear-to-br from-white via-blue-50 to-purple-50"
|
||||
}}
|
||||
id="mobile-menu-drawer"
|
||||
>
|
||||
<div className="p-6 w-72">
|
||||
<div className="mb-6">
|
||||
@@ -72,7 +117,7 @@ export default function Header() {
|
||||
<div className="h-1 w-16 bg-linear-to-r from-blue-600 to-purple-600 rounded-full mt-2"></div>
|
||||
</div>
|
||||
|
||||
<List>
|
||||
<List component="nav" aria-label="Menu de navegação">
|
||||
{menuItems.map((item, index) => (
|
||||
<ListItem
|
||||
key={item.text}
|
||||
@@ -84,18 +129,25 @@ export default function Header() {
|
||||
>
|
||||
<div className="w-full">
|
||||
<Link
|
||||
className={`flex items-center w-full p-4 text-left rounded-xl transition-all duration-300 ${
|
||||
className={`flex items-center w-full p-4 text-left rounded-xl transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 ${
|
||||
isActive(item.href)
|
||||
? "bg-linear-to-r from-blue-600 to-purple-600 text-white shadow-lg transform scale-105"
|
||||
: "hover:bg-white hover:shadow-md hover:transform hover:scale-102 text-gray-700"
|
||||
}`}
|
||||
onClick={() => { setDrawerOpen(false); }}
|
||||
href={item.href}
|
||||
aria-label={item.text}
|
||||
aria-current={isActive(item.href) ? "page" : undefined}
|
||||
>
|
||||
<span className={`transition-transform duration-300 ${isActive(item.href) ? "scale-110" : "group-hover:scale-110"}`}>
|
||||
{item.icon}
|
||||
</span>
|
||||
<span className="ml-3 font-medium">{item.text}</span>
|
||||
{isActive(item.href) && (
|
||||
<span className="ml-auto">
|
||||
<span className="inline-block w-2 h-2 bg-white rounded-full animate-pulse"></span>
|
||||
</span>
|
||||
)}
|
||||
</Link>
|
||||
</div>
|
||||
</ListItem>
|
||||
|
||||
Reference in new issue
Block a user