alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

courrier refactor

Browse Source
This commit is contained in:
alma 2025-04-26 22:59:41 +02:00
parent aefe858106
commit 367b79bf0b
1 changed files with 64 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
components/email/EmailHeader.tsx
View File

@ -1,7 +1,7 @@
'use client'; 'use client';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Search, X, Settings } from 'lucide-react'; import { Search, X, Settings, Mail } from 'lucide-react';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { import {
@ -40,69 +40,79 @@ export default function EmailHeader({
}; };
return ( return (
<div className="border-b px-4 py-2 flex items-center"> <div className="border-b flex flex-col">
<div className="flex-1"> {/* Courrier Title */}
<form onSubmit={handleSearch} className="relative"> <div className="p-3 border-b border-gray-100">
<Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" /> <div className="flex items-center gap-2">
<Input <Mail className="h-6 w-6 text-gray-600" />
type="text" <span className="text-xl font-semibold text-gray-900">COURRIER</span>
placeholder="Search emails..." </div>
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-8 pr-8 h-9"
/>
{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-muted-foreground" />
</button>
)}
</form>
</div> </div>
<div className="ml-2 flex items-center gap-1"> <div className="px-4 py-2 flex items-center">
<TooltipProvider> <div className="flex-1">
<Tooltip> <form onSubmit={handleSearch} className="relative">
<TooltipTrigger asChild> <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Button <Input
type="submit" type="text"
size="icon" placeholder="Search emails..."
variant="ghost" value={searchQuery}
className="h-8 w-8" onChange={(e) => setSearchQuery(e.target.value)}
onClick={handleSearch} className="pl-8 pr-8 h-9"
/>
{searchQuery && (
<button
type="button"
onClick={clearSearch}
className="absolute right-2 top-1/2 transform -translate-y-1/2"
> >
<Search className="h-4 w-4" /> <X className="h-4 w-4 text-muted-foreground" />
</Button> </button>
</TooltipTrigger> )}
<TooltipContent>Search</TooltipContent> </form>
</Tooltip> </div>
</TooltipProvider>
<DropdownMenu> <div className="ml-2 flex items-center gap-1">
<TooltipProvider> <TooltipProvider>
<Tooltip> <Tooltip>
<TooltipTrigger asChild> <TooltipTrigger asChild>
<DropdownMenuTrigger asChild> <Button
<Button variant="ghost" size="icon" className="h-8 w-8"> type="submit"
<Settings className="h-4 w-4" /> size="icon"
</Button> variant="ghost"
</DropdownMenuTrigger> className="h-8 w-8"
onClick={handleSearch}
>
<Search className="h-4 w-4" />
</Button>
</TooltipTrigger> </TooltipTrigger>
<TooltipContent>Settings</TooltipContent> <TooltipContent>Search</TooltipContent>
</Tooltip> </Tooltip>
</TooltipProvider> </TooltipProvider>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={onSettingsClick}> <DropdownMenu>
Email settings <TooltipProvider>
</DropdownMenuItem> <Tooltip>
<DropdownMenuItem onClick={onSettingsClick}> <TooltipTrigger asChild>
Configure IMAP <DropdownMenuTrigger asChild>
</DropdownMenuItem> <Button variant="ghost" size="icon" className="h-8 w-8">
</DropdownMenuContent> <Settings className="h-4 w-4" />
</DropdownMenu> </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>
</div> </div>
); );