Evandro Fonseca Junior
c173fec668
- Add NODE_ENV=production to .env for environment configuration - Enhance product API route with JSON cache manager for local storage and retrieval - Introduce cache-only mode and detailed logging for better performance and offline support - Update UI to display cache status and storage statistics
59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { Search } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
|
|
interface SearchBarProps {
|
|
initialQuery?: string;
|
|
className?: string;
|
|
placeholder?: string;
|
|
}
|
|
|
|
export function SearchBar({
|
|
initialQuery = "",
|
|
className = "",
|
|
placeholder = "Buscar produtos...",
|
|
}: SearchBarProps) {
|
|
const [query, setQuery] = useState(initialQuery);
|
|
const router = useRouter();
|
|
|
|
const handleSearch = () => {
|
|
if (query.trim()) {
|
|
router.push(`/resultados?q=${encodeURIComponent(query.trim())}`);
|
|
}
|
|
};
|
|
|
|
const handleKeyPress = (e: React.KeyboardEvent) => {
|
|
if (e.key === "Enter") {
|
|
handleSearch();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`flex items-center gap-2 ${className}`}>
|
|
<div className="relative flex-1 max-w-md">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
type="text"
|
|
placeholder={placeholder}
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
onKeyPress={handleKeyPress}
|
|
className="pl-10 pr-4 h-10"
|
|
/>
|
|
</div>
|
|
<Button
|
|
onClick={handleSearch}
|
|
disabled={!query.trim()}
|
|
className="h-10 px-4"
|
|
>
|
|
<Search className="h-4 w-4 mr-2" />
|
|
Buscar
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|