44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
"use client"
|
|
|
|
import { Search, SlidersHorizontal } from "lucide-react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Input } from "@/components/ui/input"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface MailSearchBarProps {
|
|
className?: string
|
|
/** Split-pane column: balanced icon inset inside the pill. */
|
|
compact?: boolean
|
|
}
|
|
|
|
export function MailSearchBar({ className, compact = false }: MailSearchBarProps) {
|
|
return (
|
|
<div className={cn("relative flex w-full min-w-0 items-center", className)}>
|
|
<div
|
|
className={cn(
|
|
"pointer-events-none absolute flex items-center text-gray-500",
|
|
compact ? "left-4" : "left-3.5"
|
|
)}
|
|
>
|
|
<Search className="size-5 shrink-0" />
|
|
</div>
|
|
<Input
|
|
type="text"
|
|
placeholder="Rechercher dans les messages"
|
|
className={cn(
|
|
"h-12 w-full rounded-full border-0 bg-muted text-sm focus-visible:bg-mail-surface focus-visible:ring-1 focus-visible:ring-ring",
|
|
compact ? "pl-11 pr-11" : "pl-11 pr-12"
|
|
)}
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
className={cn("absolute text-gray-600", compact ? "right-3" : "right-2")}
|
|
aria-label="Filtres de recherche"
|
|
>
|
|
<SlidersHorizontal className="h-5 w-5" />
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|