46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Search, X, ChevronsUpDown } from "lucide-react";
|
|
|
|
interface CategorySearchBarProps {
|
|
searchQuery: string;
|
|
onSearchChange: (query: string) => void;
|
|
allExpanded: boolean;
|
|
onToggleAll: () => void;
|
|
}
|
|
|
|
export function CategorySearchBar({
|
|
searchQuery,
|
|
onSearchChange,
|
|
allExpanded,
|
|
onToggleAll,
|
|
}: CategorySearchBarProps) {
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<div className="relative flex-1 max-w-sm">
|
|
<Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Rechercher une catégorie ou un mot-clé..."
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
className="pl-9"
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
onClick={() => onSearchChange("")}
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<Button variant="outline" size="sm" onClick={onToggleAll}>
|
|
<ChevronsUpDown className="w-4 h-4 mr-2" />
|
|
{allExpanded ? "Tout replier" : "Tout déplier"}
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|