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';
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 { Button } from '@/components/ui/button';
import {
@ -40,69 +40,79 @@ export default function EmailHeader({
};
return (
<div className="border-b 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-muted-foreground" />
<Input
type="text"
placeholder="Search emails..."
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 className="border-b flex flex-col">
{/* Courrier Title */}
<div className="p-3 border-b border-gray-100">
<div className="flex items-center gap-2">
<Mail className="h-6 w-6 text-gray-600" />
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
</div>
</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"
onClick={handleSearch}
<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-muted-foreground" />
<Input
type="text"
placeholder="Search emails..."
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"
>
<Search className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Search</TooltipContent>
</Tooltip>
</TooltipProvider>
<X className="h-4 w-4 text-muted-foreground" />
</button>
)}
</form>
</div>
<DropdownMenu>
<div className="ml-2 flex items-center gap-1">
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8">
<Settings className="h-4 w-4" />
</Button>
</DropdownMenuTrigger>
<Button
type="submit"
size="icon"
variant="ghost"
className="h-8 w-8"
onClick={handleSearch}
>
<Search className="h-4 w-4" />
</Button>
</TooltipTrigger>
<TooltipContent>Settings</TooltipContent>
<TooltipContent>Search</TooltipContent>
</Tooltip>
</TooltipProvider>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={onSettingsClick}>
Email settings
</DropdownMenuItem>
<DropdownMenuItem onClick={onSettingsClick}>
Configure IMAP
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon" className="h-8 w-8">
<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>
);