feat: integrate Google Sheets API to fetch board data and implement filtering in the catalog page
This commit is contained in:
Lucas Rayan committed
1 parent
fceb2dcdad
commit
fe06241517
8 files changed
+1351
-39
No files matched your search
@@ -1,17 +1,49 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
|
||||
# ESPDocs - Documentação ESP32 em Português
|
||||
|
||||
## Getting Started
|
||||
[](https://nextjs.org/)
|
||||
[](https://reactjs.org/)
|
||||
[](LICENSE)
|
||||
|
||||
First, run the development server:
|
||||
Documentação não oficial completa do ecossistema ESP32 em português brasileiro.
|
||||
|
||||
## 🚀 Funcionalidades
|
||||
|
||||
- **📚 Séries ESP32**: Informações detalhadas sobre todas as séries de chips ESP32
|
||||
- **⚡ Frameworks**: Documentação de frameworks populares (ESP-IDF, Arduino, MicroPython, etc.)
|
||||
- **📊 Comparação**: Compare diferentes séries ESP32 lado a lado
|
||||
- **🔌 Diagramas Interativos**: Visualize conexões e componentes de forma interativa
|
||||
- **💻 Exemplos de Código**: Código de exemplo para diferentes frameworks
|
||||
- **🛒 Catálogo de Placas**: Encontre e filtre placas de desenvolvimento ESP32
|
||||
|
||||
## 🏁 Início Rápido
|
||||
|
||||
### Instalação
|
||||
|
||||
```bash
|
||||
# Clone o repositório
|
||||
git clone https://github.com/lucasrguerra/ESPDocs.git
|
||||
|
||||
# Entre no diretório
|
||||
cd ESPDocs
|
||||
|
||||
# Instale as dependências
|
||||
npm install
|
||||
```
|
||||
|
||||
### Configuração do Marketplace (Opcional)
|
||||
|
||||
```bash
|
||||
# Copie o arquivo de exemplo
|
||||
cp .env.local.example .env.local
|
||||
|
||||
# Edite o arquivo .env.local e adicione sua API Key do Google Sheets
|
||||
# GOOGLE_SHEETS_API_KEY=sua_api_key_aqui
|
||||
```
|
||||
|
||||
### Executar em Desenvolvimento
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
@@ -20,7 +52,47 @@ You can start editing the page by modifying `app/page.js`. The page auto-updates
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
## 📁 Estrutura do Projeto
|
||||
|
||||
```
|
||||
ESPDocs/
|
||||
├── app/
|
||||
│ ├── api/
|
||||
│ │ └── placas/
|
||||
│ │ └── route.js # API do marketplace
|
||||
│ ├── comparacao/
|
||||
│ ├── frameworks/
|
||||
│ ├── placas/ # Marketplace
|
||||
│ │ └── page.jsx
|
||||
│ ├── series/
|
||||
│ ├── sobre/
|
||||
│ └── page.jsx
|
||||
├── components/
|
||||
│ ├── BoardCard.jsx # Card de placa
|
||||
│ ├── BoardFilters.jsx # Filtros (opcional)
|
||||
│ ├── CodeExample.jsx
|
||||
│ ├── ConnectionsDiagram.jsx
|
||||
│ ├── Footer.jsx
|
||||
│ ├── Header.jsx
|
||||
│ └── SeriesTabMenu.jsx
|
||||
├── public/
|
||||
│ ├── frameworks.json
|
||||
│ ├── series.json
|
||||
│ ├── conexoes/
|
||||
│ ├── exemplos/
|
||||
│ └── placas/
|
||||
├── .env.local.example # Exemplo de configuração
|
||||
```
|
||||
|
||||
## 🛠️ Tecnologias
|
||||
|
||||
- **Next.js 15**: Framework React com App Router
|
||||
- **React 19**: Biblioteca UI
|
||||
- **Tailwind CSS 4**: Estilização
|
||||
- **Material-UI**: Componentes
|
||||
- **Google Sheets API**: Integração com planilhas
|
||||
|
||||
## 📚 Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
@@ -29,8 +101,33 @@ To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
## 🚀 Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
**Importante**: Ao fazer deploy, não esqueça de adicionar a variável de ambiente `GOOGLE_SHEETS_API_KEY` nas configurações do projeto na Vercel.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
|
||||
## 📄 Licença
|
||||
|
||||
Este projeto está sob a licença MIT. Veja o arquivo [LICENSE](LICENSE) para mais detalhes.
|
||||
|
||||
## ⚠️ Disclaimer
|
||||
|
||||
Este é um projeto de documentação não oficial e independente. Não possui nenhum tipo de afiliação com a Espressif Systems, fabricante dos chips ESP32.
|
||||
|
||||
## 👤 Autor
|
||||
|
||||
**Lucas Rayan Guerra**
|
||||
- Website: [Ciência Embarcada](https://cienciaembarcada.com.br)
|
||||
- GitHub: [@lucasrguerra](https://github.com/lucasrguerra)
|
||||
|
||||
## 🤝 Contribuindo
|
||||
|
||||
Contribuições, issues e feature requests são bem-vindos!
|
||||
|
||||
---
|
||||
|
||||
Feito com ❤️ para a comunidade ESP32 brasileira
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import { google } from 'googleapis';
|
||||
import { NextResponse } from 'next/server';
|
||||
|
||||
// Configurar cache de 1 hora
|
||||
export const revalidate = 3600;
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
const spreadsheetId = process.env.SPREADSHEET_ID;
|
||||
|
||||
const sheets = google.sheets({ version: 'v4' });
|
||||
|
||||
const response = await sheets.spreadsheets.values.get({
|
||||
spreadsheetId,
|
||||
range: 'A1:Z1000',
|
||||
key: process.env.GOOGLE_SHEETS_API_KEY,
|
||||
});
|
||||
|
||||
const rows = response.data.values;
|
||||
|
||||
if (!rows || rows.length === 0) {
|
||||
return NextResponse.json({ error: 'Nenhum dado encontrado' }, { status: 404 });
|
||||
}
|
||||
|
||||
const headers = rows[0];
|
||||
|
||||
const data = rows.slice(1).map(row => {
|
||||
const obj = {};
|
||||
headers.forEach((header, index) => {
|
||||
obj[header] = row[index] || '';
|
||||
});
|
||||
return obj;
|
||||
});
|
||||
|
||||
return NextResponse.json({ data, headers }, {
|
||||
headers: {
|
||||
'Cache-Control': 'public, s-maxage=3600, stale-while-revalidate=7200'
|
||||
}
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Erro ao buscar dados do Google Sheets:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Erro ao buscar dados', details: error.message },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,373 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import Header from "@/components/Header";
|
||||
import Footer from "@/components/Footer";
|
||||
import BoardCard from "@/components/BoardCard";
|
||||
|
||||
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 excludedColumns = ['Nome', 'Link', 'Imagem'];
|
||||
|
||||
useEffect(() => {
|
||||
fetchBoards();
|
||||
}, []);
|
||||
|
||||
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 (criar novo array sem o valor)
|
||||
newFilters[column] = newFilters[column].filter(v => v !== value);
|
||||
if (newFilters[column].length === 0) {
|
||||
delete newFilters[column];
|
||||
}
|
||||
} else {
|
||||
// Adiciona o valor (criar novo array com o valor)
|
||||
newFilters[column] = [...newFilters[column], value];
|
||||
}
|
||||
}
|
||||
|
||||
return newFilters;
|
||||
});
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
setActiveFilters({});
|
||||
setSearchTerm('');
|
||||
};
|
||||
|
||||
const activeFilterCount = Object.keys(activeFilters).length + (searchTerm ? 1 : 0);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 py-16">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-4">⏳</div>
|
||||
<p className="text-xl text-gray-600">Carregando placas...</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 py-16">
|
||||
<div className="text-center">
|
||||
<div className="text-6xl mb-4">❌</div>
|
||||
<p className="text-xl text-red-600 mb-4">Erro ao carregar dados</p>
|
||||
<p className="text-gray-600 mb-6">{error}</p>
|
||||
|
||||
<button
|
||||
onClick={fetchBoards}
|
||||
className="bg-linear-to-r from-blue-600 to-purple-600 text-white px-6 py-3 rounded-xl font-semibold hover:shadow-lg transition-all"
|
||||
>
|
||||
Tentar Novamente
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const filterableColumns = headers.filter(h => !excludedColumns.includes(h));
|
||||
|
||||
return (
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
<Header />
|
||||
|
||||
<main className="max-w-7xl mx-auto px-4 py-16">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-5xl font-extrabold bg-linear-to-r from-blue-600 via-purple-600 to-pink-600 bg-clip-text text-transparent leading-relaxed mb-4">
|
||||
🛒 Catálogo de Placas ESP32
|
||||
</h1>
|
||||
|
||||
<p className="text-2xl text-gray-600 mb-2">
|
||||
Encontre a placa perfeita para o seu projeto
|
||||
</p>
|
||||
<p className="text-md text-green-600 font-semibold flex items-center justify-center gap-2">
|
||||
✓ Todos os links são verificados e de fontes confiáveis
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-4 gap-8">
|
||||
<div className="lg:col-span-1">
|
||||
<div className="bg-white rounded-2xl shadow-lg overflow-hidden sticky top-4">
|
||||
{/* Header dos Filtros */}
|
||||
<div className="bg-linear-to-r from-blue-600 to-purple-600 p-6 text-white">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h2 className="text-xl font-bold flex items-center gap-2">
|
||||
🔍 Filtros
|
||||
</h2>
|
||||
{activeFilterCount > 0 && (
|
||||
<p className="text-sm text-blue-100 mt-1">
|
||||
{activeFilterCount} filtro(s) ativo(s)
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
{activeFilterCount > 0 && (
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="bg-white/20 hover:bg-white/30 text-white px-3 py-1.5 rounded-lg font-semibold text-xs transition-all hover:scale-105"
|
||||
>
|
||||
Limpar
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo dos Filtros */}
|
||||
<div className="p-6">
|
||||
{/* Barra de Busca */}
|
||||
<div className="mb-6">
|
||||
<label className="block text-xs font-semibold text-gray-600 mb-2 uppercase tracking-wide">
|
||||
Buscar por nome
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Digite para buscar..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="w-full px-4 py-3 pl-10 border-2 border-gray-200 rounded-xl focus:border-purple-500 focus:outline-none transition-colors text-sm bg-gray-50 focus:bg-white"
|
||||
/>
|
||||
<svg className="absolute left-3 top-3.5 w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Separador */}
|
||||
<div className="border-t border-gray-200 my-2"></div>
|
||||
|
||||
{/* Filtros por Categoria */}
|
||||
<div className="space-y-2 max-h-[calc(100vh-450px)] overflow-y-auto pr-2 custom-scrollbar">
|
||||
{filterableColumns.map((column) => {
|
||||
const filterData = filterOptions[column];
|
||||
if (!filterData) return null;
|
||||
|
||||
const isActive = activeFilters[column]?.length > 0;
|
||||
|
||||
return (
|
||||
<div key={column} className={`pb-2 border-b border-gray-100 last:border-b-0 ${isActive ? 'bg-purple-50/50 rounded-lg' : ''}`}>
|
||||
{filterData.isBinary ? (
|
||||
// Filtro binário: checkbox integrado ao título
|
||||
<label className="flex justify-between cursor-pointer hover:bg-purple-50 p-3 rounded-lg transition-all group">
|
||||
<span className="font-semibold text-gray-700 group-hover:text-purple-700 transition-colors">
|
||||
{column}
|
||||
</span>
|
||||
|
||||
<div className="mt-0.5">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={activeFilters[column]?.includes('binary-enabled') || false}
|
||||
onChange={() => handleFilterToggle(column, 'binary-enabled')}
|
||||
className="w-5 h-5 rounded-md border-2 border-gray-300 text-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all cursor-pointer"
|
||||
/>
|
||||
</div>
|
||||
</label>
|
||||
) : (
|
||||
// Filtro normal: título separado + múltiplas opções
|
||||
<>
|
||||
<h3 className="font-bold text-gray-800 mb-3 text-sm uppercase tracking-wide flex items-center gap-2">
|
||||
{column}
|
||||
{isActive && (
|
||||
<span className="bg-purple-600 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
{activeFilters[column].length}
|
||||
</span>
|
||||
)}
|
||||
</h3>
|
||||
<div className="space-y-2 max-h-44 overflow-y-auto pr-2">
|
||||
{filterData.values.map((option) => (
|
||||
<label
|
||||
key={option}
|
||||
className="flex items-center gap-3 cursor-pointer hover:bg-purple-50 p-2 rounded-lg transition-all group"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={activeFilters[column]?.includes(option) || false}
|
||||
onChange={() => handleFilterToggle(column, option)}
|
||||
className="w-4 h-4 rounded border-2 border-gray-300 text-purple-600 focus:ring-2 focus:ring-purple-500 focus:ring-offset-2 transition-all cursor-pointer"
|
||||
/>
|
||||
<span className="text-sm text-gray-700 group-hover:text-purple-700 transition-colors">
|
||||
{option}
|
||||
</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid de Placas */}
|
||||
<div className="lg:col-span-3">
|
||||
<div className="mb-6 flex justify-between items-center">
|
||||
<p className="text-gray-600">
|
||||
<span className="font-bold text-purple-600">{filteredBoards.length}</span> placa(s) encontrada(s)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{filteredBoards.length === 0 ? (
|
||||
<div className="text-center py-16">
|
||||
<div className="text-6xl mb-4">🔍</div>
|
||||
<p className="text-xl text-gray-600 mb-2">Nenhuma placa encontrada</p>
|
||||
<p className="text-gray-500">Tente ajustar os filtros</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-3 gap-6">
|
||||
{filteredBoards.map((board, index) => (
|
||||
<BoardCard key={index} board={board} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Estilos customizados para scrollbar
|
||||
const styles = `
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: #f1f1f1;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(to bottom, #3b82f6, #9333ea);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: linear-gradient(to bottom, #2563eb, #7c3aed);
|
||||
}
|
||||
`;
|
||||
|
||||
if (typeof document !== 'undefined') {
|
||||
const styleSheet = document.createElement('style');
|
||||
styleSheet.textContent = styles;
|
||||
document.head.appendChild(styleSheet);
|
||||
}
|
||||
+9
-1
@@ -4,13 +4,14 @@ import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
const resources = [
|
||||
{name: "Catálogo de Placas", description: "Encontre placas de desenvolvimento ESP32 verificadas com filtros avançados e links seguros para compra", icon: "🛒"},
|
||||
{name: "Detalhes Técnicos", description: "Explore as especificações técnicas de cada série ESP32, incluindo arquitetura, recursos e capacidades", icon: "🔧"},
|
||||
{name: "Diagramas Interativos", description: "Visualize diagramas detalhados dos componentes ESP32 com interatividade para melhor compreensão", icon: "📊"},
|
||||
{name: "Frameworks Avançados", description: "Aprenda sobre frameworks populares como ESP-IDF, Arduino e MicroPython para desenvolvimento com ESP32", icon: "⚡"},
|
||||
{name: "Comparação de Séries", description: "Compare diferentes séries ESP32 para escolher o mais adequado ao seu projeto", icon: "📈"},
|
||||
{name: "Datasheets", description: "Acesso direto aos datasheets oficiais para informações detalhadas sobre cada série", icon: "📄"},
|
||||
{name: "Exemplos de Código", description: "Encontre exemplos práticos de código para iniciar rapidamente seus projetos com ESP32", icon: "💻"},
|
||||
]
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="bg-linear-to-br from-blue-50 via-white to-purple-50 min-h-screen">
|
||||
@@ -50,6 +51,13 @@ export default function Home() {
|
||||
>
|
||||
⚡ Ver Frameworks
|
||||
</Link>
|
||||
|
||||
<Link
|
||||
className="bg-white text-gray-700 px-8 py-4 rounded-xl font-semibold text-lg shadow-lg hover:shadow-xl border-2 border-gray-200 hover:border-purple-400 transform hover:-translate-y-1 transition-all duration-300"
|
||||
href="/catalogo"
|
||||
>
|
||||
🛒 Ver Catálogo de Placas
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6 mt-16">
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
"use client";
|
||||
|
||||
export default function BoardCard({ board }) {
|
||||
const mainFields = ['Nome', 'Link', 'Imagem', 'Loja Oficial'];
|
||||
|
||||
const technicalFields = Object.keys(board).filter(
|
||||
key => !mainFields.includes(key) && board[key]
|
||||
);
|
||||
|
||||
const hasFeature = (value) => {
|
||||
const yesValues = ['sim', 'opcional'];
|
||||
return yesValues.includes(value?.toString().toLowerCase().trim());
|
||||
};
|
||||
|
||||
// Filtrar apenas características que têm "Sim" ou "Opcional"
|
||||
const availableFeatures = technicalFields.filter(field => hasFeature(board[field]));
|
||||
const optionalFeatures = technicalFields.filter(field =>
|
||||
board[field]?.toString().toLowerCase().trim() === 'opcional'
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden group flex flex-col h-full">
|
||||
{/* Imagem */}
|
||||
{board.Imagem && (
|
||||
<div
|
||||
className="mx-auto w-fit"
|
||||
dangerouslySetInnerHTML={{ __html: board.Imagem }}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className="p-6 flex flex-col grow">
|
||||
{/* Nome */}
|
||||
<h3 className="text-xl font-bold text-gray-800 mb-2 line-clamp-2">
|
||||
{board.Nome || 'Placa sem nome'}
|
||||
</h3>
|
||||
|
||||
{/* Loja Oficial */}
|
||||
{board['Loja Oficial'] && board['Loja Oficial'].toLowerCase() === 'sim' && (
|
||||
<div className="mb-4">
|
||||
<p className="text-sm text-blue-600 flex items-center gap-1.5">
|
||||
<svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<span>Link da loja oficial do fabricante</span>
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Características Técnicas */}
|
||||
{availableFeatures.length > 0 && (
|
||||
<div className="mb-4 grow">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<svg className="w-4 h-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
|
||||
</svg>
|
||||
<h4 className="text-sm font-semibold text-gray-700">Recursos Disponíveis</h4>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{availableFeatures.map((field) => {
|
||||
const isOptional = optionalFeatures.includes(field);
|
||||
return (
|
||||
<div
|
||||
key={field}
|
||||
className={`text-xs px-3 py-1.5 rounded-lg font-medium flex items-center gap-1 ${
|
||||
isOptional
|
||||
? 'bg-yellow-100 text-yellow-700 border border-yellow-200'
|
||||
: 'bg-green-100 text-green-700 border border-green-200'
|
||||
}`}
|
||||
>
|
||||
{isOptional ? (
|
||||
<svg className="w-3 h-3" 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>
|
||||
) : (
|
||||
<svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
|
||||
</svg>
|
||||
)}
|
||||
<span>{field}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Link para mais informações - sempre no final */}
|
||||
{board.Link && (
|
||||
<a
|
||||
href={board.Link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="block w-full bg-linear-to-r from-blue-600 to-purple-600 text-white text-center px-4 py-3 rounded-xl font-semibold hover:shadow-lg transform hover:-translate-y-1 transition-all duration-300 mt-auto"
|
||||
>
|
||||
Abrir no AliExpress 🔗
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -15,6 +15,7 @@ import AboutIcon from "@mui/icons-material/Info";
|
||||
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";
|
||||
|
||||
export default function Header() {
|
||||
const [drawerOpen, setDrawerOpen] = useState(false);
|
||||
@@ -26,6 +27,7 @@ export default function Header() {
|
||||
{ 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 /> },
|
||||
];
|
||||
|
||||
function isActive(href) {
|
||||
|
||||
Generated
+710
-27
File diff suppressed because it is too large.
Load diff
@@ -13,6 +13,7 @@
|
||||
"@emotion/styled": "^11.14.1",
|
||||
"@mui/icons-material": "^7.3.4",
|
||||
"@mui/material": "^7.3.4",
|
||||
"googleapis": "^165.0.0",
|
||||
"next": "15.5.6",
|
||||
"react": "19.1.0",
|
||||
"react-dom": "19.1.0"
|
||||
|
||||
Reference in new issue
Block a user