41 lines
1.5 KiB
TypeScript
41 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import { Search, X } from "lucide-react"
|
|
import { HeaderAccountActions } from "@/components/gmail/header-account-actions"
|
|
|
|
interface ContactsHeaderProps {
|
|
searchQuery: string
|
|
onSearchChange: (q: string) => void
|
|
}
|
|
|
|
export function ContactsHeader({ searchQuery, onSearchChange }: ContactsHeaderProps) {
|
|
return (
|
|
<header className="flex h-16 shrink-0 items-center gap-4 border-b border-gray-200 px-6">
|
|
<div className="flex min-w-0 flex-1 items-center">
|
|
<div className="flex h-12 w-full max-w-[720px] items-center gap-3 rounded-full bg-[#edf2fc] px-4 transition-colors focus-within:bg-white focus-within:shadow-md focus-within:ring-1 focus-within:ring-gray-200">
|
|
<Search className="h-5 w-5 shrink-0 text-[#5f6368]" />
|
|
<input
|
|
type="text"
|
|
value={searchQuery}
|
|
onChange={(e) => onSearchChange(e.target.value)}
|
|
placeholder="Rechercher"
|
|
className="flex-1 bg-transparent text-sm text-[#1f1f1f] outline-none placeholder:text-[#5f6368]"
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onSearchChange("")}
|
|
className="rounded-full p-1 hover:bg-gray-100"
|
|
aria-label="Effacer la recherche"
|
|
>
|
|
<X className="h-4 w-4 text-[#5f6368]" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<HeaderAccountActions className="pl-4" />
|
|
</header>
|
|
)
|
|
}
|