Lucas RayanandAntigravity
c1bd2c7e11
- Translate content to English across messages/en.json, data/en, lib/data/en, and public/exemplos/en - Implement localized routing, slugs, and language negotiation with fallback to en - Build dedicated search index for English with strict book exclusion - Update components and pages to dynamically render localized strings and datasets - Verify full structural parity and exact 1:1 match on Portuguese pages via comparator Co-Authored-By: Antigravity <noreply@google.com>
92 lines
3.1 KiB
React
92 lines
3.1 KiB
React
"use client";
|
|
|
|
import { ArrowUpRight, Award, Check, CircleHelp } from "lucide-react";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
const HEADER_MAP_EN = {
|
|
"Nome": "Name",
|
|
"Descrição": "Description",
|
|
"Série": "Series",
|
|
"Loja Oficial": "Official Store",
|
|
"Fabricante": "Manufacturer",
|
|
"Processador": "Processor",
|
|
"Memória Flash": "Flash Memory",
|
|
"PSRAM": "PSRAM",
|
|
"Conector USB": "USB Connector",
|
|
"Interface USB": "USB Interface",
|
|
"Antena": "Antenna",
|
|
"Bateria": "Battery",
|
|
"Display": "Display",
|
|
"Sensores": "Sensors",
|
|
"Botões": "Buttons",
|
|
"LEDs": "LEDs",
|
|
};
|
|
|
|
export default function BoardCard({ board }) {
|
|
const pathname = usePathname() || "";
|
|
const isEn = pathname === "/en" || pathname.startsWith("/en/");
|
|
|
|
const mainFields = ["Nome", "Link", "Imagem", "Loja Oficial"];
|
|
|
|
const technicalFields = Object.keys(board).filter((key) => !mainFields.includes(key) && board[key]);
|
|
|
|
const valor = (campo) => board[campo]?.toString().toLowerCase().trim();
|
|
const recursos = technicalFields.filter((campo) => ["sim", "opcional"].includes(valor(campo)));
|
|
const lojaOficial = valor("Loja Oficial") === "sim";
|
|
|
|
return (
|
|
<article className="card card-interactive flex h-full flex-col overflow-hidden">
|
|
{board.Imagem && (
|
|
<div
|
|
className="flex shrink-0 justify-center border-b border-line bg-surface-2 p-4 [&_img]:h-44 [&_img]:w-auto [&_img]:max-w-full [&_img]:object-contain"
|
|
dangerouslySetInnerHTML={{ __html: board.Imagem }}
|
|
/>
|
|
)}
|
|
|
|
<div className="flex grow flex-col p-5">
|
|
{lojaOficial && (
|
|
<span className="chip chip-accent mb-3 w-fit">
|
|
<Award className="h-3.5 w-3.5" aria-hidden="true" />
|
|
{isEn ? "Official store" : "Loja oficial"}
|
|
</span>
|
|
)}
|
|
|
|
<h3 className="line-clamp-2 font-display text-lg font-semibold leading-snug tracking-[-0.02em] text-ink">
|
|
{board.Nome || (isEn ? "Generic board" : "Placa genérica")}
|
|
</h3>
|
|
|
|
{recursos.length > 0 && (
|
|
<div className="mt-4">
|
|
<p className="text-xs font-medium text-muted">{isEn ? "On-board features" : "Recursos embarcados"}</p>
|
|
<ul className="mt-2 flex flex-wrap gap-1.5">
|
|
{recursos.map((campo) => {
|
|
const opcional = valor(campo) === "opcional";
|
|
const label = isEn ? (HEADER_MAP_EN[campo] || campo) : campo;
|
|
return (
|
|
<li key={campo} className={`chip ${opcional ? "text-gold" : "text-ink-soft"}`}>
|
|
{opcional ? (
|
|
<CircleHelp className="h-3 w-3 text-gold" aria-hidden="true" />
|
|
) : (
|
|
<Check className="h-3 w-3 text-ok" aria-hidden="true" />
|
|
)}
|
|
{label}
|
|
{opcional && <span className="sr-only">{isEn ? " (optional)" : " (opcional)"}</span>}
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{board.Link && (
|
|
<a href={board.Link} target="_blank" rel="noopener noreferrer" className="btn btn-primary mt-6 w-full">
|
|
{isEn ? "View on AliExpress" : "Ver no AliExpress"}
|
|
<ArrowUpRight className="h-4 w-4" aria-hidden="true" />
|
|
<span className="sr-only">{isEn ? " (opens in new tab)" : " (abre em nova aba)"}</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
</article>
|
|
);
|
|
}
|