42 lines
1.4 KiB
TypeScript
42 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { t, type Locale } from "@/lib/i18n";
|
|
import { searchItems, type Item } from "@/lib/items";
|
|
|
|
export default function SearchButton({
|
|
locale,
|
|
onResults,
|
|
}: {
|
|
locale: Locale;
|
|
onResults: (items: Item[], error: string) => void;
|
|
}) {
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function handleSearch() {
|
|
const query = (document.getElementById("search-input") as HTMLInputElement)?.value.trim();
|
|
if (!query) return;
|
|
|
|
setLoading(true);
|
|
|
|
try {
|
|
const result = await searchItems(query);
|
|
onResults(result.items, result.error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<input type="text" id="search-input" placeholder={t(locale, "articles.search")} className="ml-2 rounded-lg border border-slate-300 bg-white px-3 text-slate-700 outline-none focus:border-cyan-600 focus:ring-2 focus:ring-cyan-100" />
|
|
<button
|
|
type="button"
|
|
onClick={handleSearch}
|
|
className="inline-flex h-10 items-center rounded-lg bg-white/10 px-4 text-sm font-semibold text-white ring-1 ring-white/30 transition hover:bg-white/20"
|
|
>
|
|
{loading ? t(locale, "articles.loading") : t(locale, "articles.search")}
|
|
</button>
|
|
</>
|
|
);
|
|
} |