feat(busca): barra de busca em destaque na home e campo largo no cabeçalho; release 1.10.0
CI / Lint e auditorias (push) Successful in 53s
CI / Trivy (dependências e segredos) (push) Successful in 12s
CI / Imagem Docker (linux/arm64) (push) Successful in 2m32s
Release / Plano (reaproveitar a imagem?) (push) Successful in 12s
Release / ci (push) Skipped
Release / Publica a imagem (linux/arm64) (push) Successful in 20s
Release / Deploy no Coolify (push) Skipped
Release / Cria a release no Gitea (push) Successful in 9s

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Lucas RayanandClaude Opus 5.5 committed 2026-11-06 11:43:22 -03:00
1 parent df39436dcb
commit 85d6ab736d
4 files changed
+72 -3

No files matched your search

+43
View File
@@ -0,0 +1,43 @@
"use client";
import { Search } from "lucide-react";
const T = {
pt: { rotulo: "Buscar no ESPDocs", dica: "Pergunte do seu jeito: chip, pino, periférico ou erro", exemplos: "Experimente:", lista: ["pino 32 esp32-s3", "usb c6", "brownout", "deep sleep"] },
en: { rotulo: "Search ESPDocs", dica: "Ask your way: chip, pin, peripheral or error", exemplos: "Try:", lista: ["pin 32 esp32-s3", "usb pins c6", "brownout", "deep sleep"] },
es: { rotulo: "Buscar en ESPDocs", dica: "Pregunte a su manera: chip, pin, periférico o error", exemplos: "Pruebe:", lista: ["pin 32 esp32-s3", "pines usb c6", "brownout", "deep sleep"] },
fr: { rotulo: "Rechercher sur ESPDocs", dica: "Demandez à votre façon : puce, broche, périphérique ou erreur", exemplos: "Essayez :", lista: ["broche 32 esp32-s3", "broches usb c6", "brownout", "deep sleep"] },
de: { rotulo: "ESPDocs durchsuchen", dica: "Fragen Sie frei: Chip, Pin, Peripherie oder Fehler", exemplos: "Probieren Sie:", lista: ["pin 32 esp32-s3", "usb pins c6", "brownout", "deep sleep"] },
"zh-CN": { rotulo: "在 ESPDocs 中搜索", dica: "随意提问:芯片、引脚、外设或错误", exemplos: "试试:", lista: ["pin 32 esp32-s3", "usb c6", "brownout", "deep sleep"] },
};
function abrirBusca(consulta) {
window.dispatchEvent(new CustomEvent("espdocs:abrir-busca", { detail: { consulta } }));
}
/* Barra de busca em destaque no hero da home. Abre o mesmo diálogo do cabeçalho. */
export default function BuscaDestaque({ locale = "pt" }) {
const t = T[locale] ?? T.pt;
return (
<div className="mx-auto mt-9 w-full max-w-2xl">
<button
type="button"
onClick={() => abrirBusca()}
aria-label={`${t.rotulo} (Ctrl+K)`}
className="group flex min-h-16 w-full cursor-text items-center gap-4 rounded-full border-2 border-line-strong bg-surface px-6 text-left shadow-[0_18px_40px_-20px_var(--shadow-ink)] transition-colors hover:border-accent focus-visible:border-accent"
>
<Search className="h-6 w-6 shrink-0 text-accent" aria-hidden="true" />
<span className="flex-1 truncate text-base text-muted sm:text-lg">{t.dica}</span>
<kbd className="hidden rounded-md border border-line bg-surface-2 px-2 py-1 font-mono text-xs font-semibold text-muted sm:inline">Ctrl K</kbd>
</button>
<p className="mt-4 flex flex-wrap items-center justify-center gap-2 text-sm text-muted">
<span>{t.exemplos}</span>
{t.lista.map((ex) => (
<button key={ex} type="button" onClick={() => abrirBusca(ex)} className="chip-btn">
{ex}
</button>
))}
</p>
</div>
);
}
+13 -2
View File
@@ -183,6 +183,17 @@ export default function SearchDialog() {
setAtivo(0);
}, []);
// Outros componentes (a barra da home) abrem a busca com window.dispatchEvent(
// new CustomEvent("espdocs:abrir-busca", { detail: { consulta } })).
useEffect(() => {
function onAbrir(e) {
if (e.detail?.consulta) setConsulta(e.detail.consulta);
setAberto(true);
}
window.addEventListener("espdocs:abrir-busca", onAbrir);
return () => window.removeEventListener("espdocs:abrir-busca", onAbrir);
}, []);
// Atalhos globais: Ctrl/⌘+K abre; "/" abre fora de campos de texto.
useEffect(() => {
function onKey(e) {
@@ -306,11 +317,11 @@ export default function SearchDialog() {
type="button"
id="botao-busca"
onClick={() => setAberto(true)}
className="flex h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center gap-2 rounded-full border border-line px-3 text-ink transition-colors hover:bg-surface-2 xl:px-4"
className="flex h-11 min-w-11 shrink-0 cursor-pointer items-center justify-center gap-2.5 rounded-full border border-line-strong bg-surface px-3 text-ink shadow-sm transition-colors hover:border-accent hover:bg-surface-2 xl:w-72 xl:justify-start xl:px-4"
aria-label={isEn ? "Search ESPDocs (Ctrl+K)" : isEs ? "Buscar en ESPDocs (Ctrl+K)" : isFr ? "Rechercher sur ESPDocs (Ctrl+K)" : isZh ? "在 ESPDocs 中搜索(Ctrl+K)" : isDe ? "ESPDocs durchsuchen (Strg+K)" : "Buscar no ESPDocs (Ctrl+K)"}
>
<Search className="h-4 w-4" aria-hidden="true" />
<span className="hidden text-sm font-medium xl:inline">{isEn ? "Search" : isEs ? "Buscar" : isFr ? "Rechercher" : isZh ? "搜索" : isDe ? "Suchen" : "Buscar"}</span>
<span className="hidden flex-1 truncate text-left text-sm text-muted xl:inline">{isEn ? "Search chips, pins…" : isEs ? "Buscar chips, pines…" : isFr ? "Chercher puces, broches…" : isZh ? "搜索芯片、引脚…" : isDe ? "Chips, Pins suchen…" : "Buscar chips, pinos…"}</span>
<kbd className="hidden rounded-md border border-line bg-surface-2 px-1.5 py-0.5 font-mono text-xs font-semibold text-muted xl:inline">{isZh ? "Ctrl K" : isDe ? "Strg K" : "Ctrl K"}</kbd>
</button>