126 lines
4.1 KiB
TypeScript
126 lines
4.1 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Search, ScanLine } from "lucide-react";
|
|
import { detectSearchType, isValidBarcode } from "@/lib/openFoodFactsApi";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface SearchBarProps {
|
|
initialQuery?: string;
|
|
className?: string;
|
|
placeholder?: string;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export function SearchBar({
|
|
initialQuery = "",
|
|
className = "",
|
|
placeholder = "Buscar produtos ou código de barras…",
|
|
compact = false,
|
|
}: SearchBarProps) {
|
|
const [query, setQuery] = useState(initialQuery);
|
|
const [searchType, setSearchType] = useState<"barcode" | "name" | null>(null);
|
|
const router = useRouter();
|
|
|
|
useEffect(() => {
|
|
const cleaned = query.replace(/\D/g, "");
|
|
if (cleaned.length >= 8 && cleaned.length <= 13) {
|
|
setSearchType("barcode");
|
|
} else if (query.trim()) {
|
|
setSearchType("name");
|
|
} else {
|
|
setSearchType(null);
|
|
}
|
|
}, [query]);
|
|
|
|
const handleSearch = () => {
|
|
if (!query.trim()) return;
|
|
const type = detectSearchType(query);
|
|
if (type === "barcode") {
|
|
const clean = query.replace(/\D/g, "");
|
|
if (isValidBarcode(clean)) {
|
|
router.push(`/produto/${clean}`);
|
|
} else {
|
|
router.push(`/resultados?q=${encodeURIComponent(query.trim())}`);
|
|
}
|
|
} else {
|
|
router.push(`/resultados?q=${encodeURIComponent(query.trim())}`);
|
|
}
|
|
};
|
|
|
|
const handleKey = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter") handleSearch();
|
|
};
|
|
|
|
if (compact) {
|
|
return (
|
|
<div className={cn("flex items-center gap-2", className)}>
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[var(--fg-faint)]" strokeWidth={1.5} />
|
|
<input
|
|
type="text"
|
|
placeholder={placeholder}
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
onKeyDown={handleKey}
|
|
className={cn(
|
|
"w-full pl-9 pr-3 h-9 text-sm rounded border border-[var(--border-subtle)]",
|
|
"bg-[var(--bg-elevated)] text-[var(--fg-primary)] placeholder-[var(--fg-faint)]",
|
|
"focus:outline-none focus:border-[var(--accent)] transition-colors duration-200"
|
|
)}
|
|
/>
|
|
</div>
|
|
<button
|
|
onClick={handleSearch}
|
|
disabled={!query.trim()}
|
|
className="btn-accent h-9 px-3 py-0 text-xs disabled:opacity-40"
|
|
>
|
|
<Search className="w-3.5 h-3.5" strokeWidth={1.5} />
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className={cn("flex items-center gap-2", className)}>
|
|
<div className="relative flex-1 max-w-md">
|
|
<div className="absolute left-3 top-1/2 -translate-y-1/2 text-[var(--fg-muted)]">
|
|
{searchType === "barcode" ? (
|
|
<ScanLine className="w-4 h-4" strokeWidth={1.5} />
|
|
) : (
|
|
<Search className="w-4 h-4" strokeWidth={1.5} />
|
|
)}
|
|
</div>
|
|
<input
|
|
type="text"
|
|
placeholder={placeholder}
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
onKeyDown={handleKey}
|
|
className={cn(
|
|
"w-full pl-10 pr-4 h-10 text-sm rounded border border-[var(--border-subtle)]",
|
|
"bg-[var(--bg-elevated)] text-[var(--fg-primary)] placeholder-[var(--fg-faint)]",
|
|
"focus:outline-none focus:border-[var(--accent)] transition-colors duration-200"
|
|
)}
|
|
/>
|
|
{searchType && (
|
|
<div className="absolute right-3 top-1/2 -translate-y-1/2">
|
|
<span className="label text-[var(--fg-faint)] bg-[var(--bg-surface)] px-2 py-0.5 rounded border border-[var(--border-subtle)]">
|
|
{searchType === "barcode" ? "Código" : "Nome"}
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={handleSearch}
|
|
disabled={!query.trim()}
|
|
className="btn-accent h-10 px-4 text-sm disabled:opacity-40"
|
|
>
|
|
<Search className="w-4 h-4" strokeWidth={1.5} />
|
|
Buscar
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|