feat(i18n): routing and localization infrastructure (phase 1)

Implement Phase 1 of i18n spec: - Configure next-intl with 6 locales (pt, en, es, fr, de, zh-CN) and pathnames - Move routes to app/[locale] structure with localized layouts and metadata - Add middleware for root language negotiation (307), legacy redirects (308), and 404 for non-pt book - Implement language selector dropdown in header with cookie persistence - Add system typography rules for zh-CN and word-break/hyphenation for de/fr Co-Authored-By: Antigravity <noreply@google.com>
2026-11-01 09:31:22 -03:00
1 parent e92aea0c84
commit 83c0ba3e74
@@ -0,0 +1,39 @@
+import { paginaMeta, jsonLd } from "@/lib/seo";
+
+export const metadata = paginaMeta({
+	titulo: "Catálogo de placas ESP32",
+	descricao: "Placas de desenvolvimento com ESP32 disponíveis no Brasil, com filtro por série, conector e conversor USB-serial.",
+	caminho: "/catalogo",
+	keywords: ["placas ESP32", "DevKit ESP32", "comprar ESP32", "ESP32 DevKitC"],
+});
+
+export default function Layout({ children }) {
+	return (
+		<>
+			<script
+				type="application/ld+json"
+				dangerouslySetInnerHTML={{
+					__html: JSON.stringify(
+						jsonLd.aplicacaoWeb({
+							nome: "Catálogo de Placas ESP32",
+							descricao: "Guia e catálogo interativo de placas de desenvolvimento e DevKits com microcontroladores ESP32.",
+							caminho: "/catalogo",
+						})
+					),
+				}}
+			/>
+			<script
+				type="application/ld+json"
+				dangerouslySetInnerHTML={{
+					__html: JSON.stringify(
+						jsonLd.trilha([
+							{ nome: "Início", caminho: "/" },
+							{ nome: "Catálogo de Placas", caminho: "/catalogo" },
+						])
+					),
+				}}
+			/>
+			{children}
+		</>
+	);
+}
@@ -0,0 +1,325 @@
+"use client";
+
+import { useState, useEffect } from 'react';
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import PageHero from "@/components/PageHero";
+import BoardCard from "@/components/BoardCard";
+import { AlertTriangle, RefreshCw, Search, ShoppingCart, SlidersHorizontal } from "lucide-react";
+
+export default function PlacasPage() {
+	const [boards, setBoards] = useState([]);
+	const [filteredBoards, setFilteredBoards] = useState([]);
+	const [headers, setHeaders] = useState([]);
+	const [loading, setLoading] = useState(true);
+	const [error, setError] = useState(null);
+	const [searchTerm, setSearchTerm] = useState('');
+	const [activeFilters, setActiveFilters] = useState({});
+	const [filterOptions, setFilterOptions] = useState({});
+	const [filtrosAbertos, setFiltrosAbertos] = useState(false);
+
+	const excludedColumns = ['Nome', 'Descrição', 'Link', 'Imagem', 'Loja Oficial'];
+
+	useEffect(() => {
+		fetchBoards();
+		// No desktop os filtros ficam sempre à vista; no celular começam recolhidos.
+		setFiltrosAbertos(window.matchMedia('(min-width: 1024px)').matches);
+	}, []);
+
+	useEffect(() => {
+		applyFilters();
+	}, [boards, searchTerm, activeFilters]);
+
+	const fetchBoards = async () => {
+		try {
+			setLoading(true);
+			const response = await fetch('/api/placas');
+			
+			if (!response.ok) {
+				throw new Error('Erro ao carregar dados das placas');
+			}
+
+			const result = await response.json();
+			setBoards(result.data);
+			setHeaders(result.headers);
+			setFilteredBoards(result.data);
+			
+			generateFilterOptions(result.data, result.headers);
+		} catch (err) {
+			setError(err.message);
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	const generateFilterOptions = (data, headers) => {
+		const options = {};
+		const filterableColumns = headers.filter(h => !excludedColumns.includes(h));
+
+		filterableColumns.forEach(column => {
+			const uniqueValues = new Set();
+			data.forEach(item => {
+				const value = item[column];
+				if (value && value.toString().trim()) {
+					uniqueValues.add(value.toString().trim());
+				}
+			});
+			
+			const values = Array.from(uniqueValues).sort();
+			
+			// Verificar se é um filtro binário (apenas Sim/Não/Opcional)
+			const binaryValues = ['Sim', 'Não', 'Opcional'];
+			const isBinaryFilter = values.every(v => binaryValues.includes(v));
+			
+			options[column] = {
+				values: values,
+				isBinary: isBinaryFilter
+			};
+		});
+
+		setFilterOptions(options);
+	};
+
+	const applyFilters = () => {
+		let filtered = [...boards];
+
+		if (searchTerm) {
+			filtered = filtered.filter(board => {
+				const searchLower = searchTerm.toLowerCase();
+				return (
+					board.Nome?.toLowerCase().includes(searchLower) ||
+					board.Descrição?.toLowerCase().includes(searchLower)
+				);
+			});
+		}
+
+		Object.keys(activeFilters).forEach(column => {
+			if (activeFilters[column] && activeFilters[column].length > 0) {
+				filtered = filtered.filter(board => {
+					const boardValue = board[column]?.toString().trim();
+					
+					// Para filtros binários, o valor armazenado é 'binary-enabled'
+					if (activeFilters[column].includes('binary-enabled')) {
+						return boardValue === 'Sim' || boardValue === 'Opcional';
+					}
+					
+					return activeFilters[column].includes(boardValue);
+				});
+			}
+		});
+
+		setFilteredBoards(filtered);
+	};
+
+	const handleFilterToggle = (column, value) => {
+		setActiveFilters(prev => {
+			const newFilters = { ...prev };
+			
+			if (!newFilters[column]) {
+				newFilters[column] = [value];
+			} else {
+				const index = newFilters[column].indexOf(value);
+				if (index > -1) {
+					// Remove o valor
+					newFilters[column] = newFilters[column].filter(v => v !== value);
+					if (newFilters[column].length === 0) {
+						delete newFilters[column];
+					}
+				} else {
+					// Adiciona o valor
+					newFilters[column] = [...newFilters[column], value];
+				}
+			}
+
+			return newFilters;
+		});
+	};
+
+	const clearFilters = () => {
+		setActiveFilters({});
+		setSearchTerm('');
+	};
+
+	const activeFilterCount = Object.keys(activeFilters).length + (searchTerm ? 1 : 0);
+
+	const filterableColumns = headers.filter((h) => !excludedColumns.includes(h));
+
+	const hero = (
+		<PageHero
+			trail={[{ label: "Catálogo de placas" }]}
+			icon={ShoppingCart}
+			label="DevKits e módulos reais"
+			title="Catálogo de placas ESP32"
+			lede="Compare placas oficiais e alternativas para o seu projeto: interface USB, sensores integrados e link direto para a loja."
+		/>
+	);
+
+	if (loading) {
+		return (
+			<div className="site-canvas min-h-screen">
+				<Header />
+				<main id="conteudo">
+					{hero}
+					<section className="shell section pt-10" aria-busy="true" aria-label="Carregando placas">
+						<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+							{Array.from({ length: 6 }).map((_, i) => (
+								<div key={i} className="card h-72 animate-pulse bg-surface-2" />
+							))}
+						</div>
+						<p role="status" className="mt-6 text-center text-sm text-muted">Consultando o banco de placas…</p>
+					</section>
+				</main>
+				<Footer />
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="site-canvas min-h-screen">
+				<Header />
+				<main id="conteudo">
+					{hero}
+					<section className="shell section pt-10">
+						<div role="alert" className="callout callout-danger flex items-start gap-3">
+							<AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-danger" aria-hidden="true" />
+							<div>
+								<p className="font-semibold text-ink">Não foi possível carregar as placas</p>
+								<p className="mt-1">{error}. Verifique a conexão e tente de novo.</p>
+								<button type="button" onClick={fetchBoards} className="btn btn-primary btn-sm mt-4">
+									<RefreshCw className="h-4 w-4" aria-hidden="true" />
+									Tentar novamente
+								</button>
+							</div>
+						</div>
+					</section>
+				</main>
+				<Footer />
+			</div>
+		);
+	}
+
+	const filtros = (
+		<div className="space-y-6">
+			<div>
+				<label htmlFor="busca-placa" className="text-sm font-semibold text-ink">
+					Buscar placa
+				</label>
+				<div className="relative mt-2">
+					<Search className="pointer-events-none absolute left-3.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted" aria-hidden="true" />
+					<input
+						id="busca-placa"
+						type="search"
+						placeholder="Nome ou descrição"
+						value={searchTerm}
+						onChange={(e) => setSearchTerm(e.target.value)}
+						className="field pl-10 text-sm"
+					/>
+				</div>
+			</div>
+
+			{filterableColumns.map((column) => {
+				const filterData = filterOptions[column];
+				if (!filterData) return null;
+
+				if (filterData.isBinary) {
+					return (
+						<label key={column} className="flex min-h-11 cursor-pointer items-center justify-between gap-3 border-t border-line pt-4 text-sm font-medium text-ink-soft">
+							{column}
+							<input
+								type="checkbox"
+								checked={activeFilters[column]?.includes("binary-enabled") || false}
+								onChange={() => handleFilterToggle(column, "binary-enabled")}
+								className="h-5 w-5 shrink-0 cursor-pointer accent-[var(--accent)]"
+							/>
+						</label>
+					);
+				}
+
+				return (
+					<fieldset key={column} className="border-t border-line pt-4">
+						<legend className="flex items-center gap-2 pr-2 text-sm font-semibold text-ink">
+							{column}
+							{activeFilters[column]?.length > 0 && <span className="chip chip-accent px-2 py-0">{activeFilters[column].length}</span>}
+						</legend>
+						<div className="mt-2 max-h-44 space-y-0.5 overflow-y-auto pr-1">
+							{filterData.values.map((option) => (
+								<label key={option} className="flex min-h-10 cursor-pointer items-center gap-3 rounded-lg px-2 text-sm text-muted transition-colors hover:bg-surface-2 hover:text-ink">
+									<input
+										type="checkbox"
+										checked={activeFilters[column]?.includes(option) || false}
+										onChange={() => handleFilterToggle(column, option)}
+										className="h-4 w-4 shrink-0 cursor-pointer accent-[var(--accent)]"
+									/>
+									{option}
+								</label>
+							))}
+						</div>
+					</fieldset>
+				);
+			})}
+		</div>
+	);
+
+	return (
+		<div className="site-canvas min-h-screen">
+			<Header />
+
+			<main id="conteudo">
+				{hero}
+
+				<section className="shell section pt-10 sm:pt-12" aria-label="Placas">
+					<div className="grid gap-8 lg:grid-cols-[17rem_1fr] lg:gap-10">
+						<aside className="lg:sticky lg:top-28 lg:self-start">
+							<details className="panel" open={filtrosAbertos} onToggle={(e) => setFiltrosAbertos(e.currentTarget.open)}>
+								<summary className="flex min-h-12 cursor-pointer list-none items-center justify-between gap-3 px-5 py-3 lg:cursor-default">
+									<span className="flex items-center gap-2 text-sm font-semibold text-ink">
+										<SlidersHorizontal className="h-4 w-4 text-accent" aria-hidden="true" />
+										Filtros
+										{activeFilterCount > 0 && <span className="chip chip-accent px-2 py-0">{activeFilterCount}</span>}
+									</span>
+									{activeFilterCount > 0 && (
+										<button
+											type="button"
+											onClick={(e) => { e.preventDefault(); clearFilters(); }}
+											className="text-sm font-medium text-accent hover:text-accent-strong"
+										>
+											Limpar
+										</button>
+									)}
+								</summary>
+								<div className="border-t border-line p-5 lg:max-h-[calc(100vh-11rem)] lg:overflow-y-auto">{filtros}</div>
+							</details>
+						</aside>
+
+						<div>
+							<p role="status" aria-live="polite" className="text-sm text-muted">
+								<strong className="font-semibold text-ink">{filteredBoards.length}</strong>{" "}
+								{filteredBoards.length === 1 ? "placa encontrada" : "placas encontradas"}
+							</p>
+
+							{filteredBoards.length === 0 ? (
+								<div className="card mt-4 px-6 py-14 text-center">
+									<Search className="mx-auto h-10 w-10 text-muted" aria-hidden="true" />
+									<h2 className="mt-4 font-display text-xl font-semibold text-ink">Nenhuma placa com esses filtros</h2>
+									<p className="mx-auto mt-2 max-w-md text-sm text-muted">Remova alguns filtros ou busque por outro nome.</p>
+									<button type="button" onClick={clearFilters} className="btn btn-primary mt-6">
+										Limpar filtros
+									</button>
+								</div>
+							) : (
+								<div className="mt-4 grid gap-4 md:grid-cols-2 xl:grid-cols-3">
+									{filteredBoards.map((board, index) => (
+										<BoardCard key={index} board={board} />
+									))}
+								</div>
+							)}
+						</div>
+					</div>
+				</section>
+			</main>
+
+			<Footer />
+		</div>
+	);
+}