119 lines
3.8 KiB
TypeScript
119 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState } from 'react';
|
|
import { Search, X, Settings, Mail } from 'lucide-react';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger
|
|
} from '@/components/ui/tooltip';
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from '@/components/ui/dropdown-menu';
|
|
|
|
interface EmailHeaderProps {
|
|
onSearch: (query: string) => void;
|
|
onSettingsClick?: () => void;
|
|
}
|
|
|
|
export default function EmailHeader({
|
|
onSearch,
|
|
onSettingsClick,
|
|
}: EmailHeaderProps) {
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [isSearching, setIsSearching] = useState(false);
|
|
|
|
const handleSearch = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
onSearch(searchQuery);
|
|
};
|
|
|
|
const clearSearch = () => {
|
|
setSearchQuery('');
|
|
onSearch('');
|
|
};
|
|
|
|
return (
|
|
<div className="border-b bg-white/95 backdrop-blur-sm flex flex-col">
|
|
{/* Courrier Title with improved styling */}
|
|
<div className="p-3 border-b border-gray-100">
|
|
<div className="flex items-center gap-2">
|
|
<Mail className="h-6 w-6 text-blue-600" />
|
|
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-4 py-2 flex items-center">
|
|
<div className="flex-1">
|
|
<form onSubmit={handleSearch} className="relative">
|
|
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search emails..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="pl-8 pr-8 h-9 bg-gray-50 border-gray-200 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50"
|
|
/>
|
|
{searchQuery && (
|
|
<button
|
|
type="button"
|
|
onClick={clearSearch}
|
|
className="absolute right-2 top-1/2 transform -translate-y-1/2"
|
|
>
|
|
<X className="h-4 w-4 text-gray-400 hover:text-gray-600" />
|
|
</button>
|
|
)}
|
|
</form>
|
|
</div>
|
|
|
|
<div className="ml-2 flex items-center gap-1">
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<Button
|
|
type="submit"
|
|
size="icon"
|
|
variant="ghost"
|
|
className="h-8 w-8 text-gray-600 hover:text-gray-900"
|
|
onClick={handleSearch}
|
|
>
|
|
<Search className="h-4 w-4" />
|
|
</Button>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Search</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
|
|
<DropdownMenu>
|
|
<TooltipProvider>
|
|
<Tooltip>
|
|
<TooltipTrigger asChild>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8 text-gray-600 hover:text-gray-900">
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
</TooltipTrigger>
|
|
<TooltipContent>Settings</TooltipContent>
|
|
</Tooltip>
|
|
</TooltipProvider>
|
|
<DropdownMenuContent align="end">
|
|
<DropdownMenuItem onClick={onSettingsClick}>
|
|
Email settings
|
|
</DropdownMenuItem>
|
|
<DropdownMenuItem onClick={onSettingsClick}>
|
|
Configure IMAP
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|