mail page custum 7
This commit is contained in:
parent
cace79a931
commit
4c8dcbfd8d
@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp } from 'lucide-react';
|
||||
import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen } from 'lucide-react';
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
@ -89,6 +89,7 @@ export default function MailPage() {
|
||||
const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
|
||||
const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
|
||||
const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
|
||||
const [showEmailActions, setShowEmailActions] = useState(false);
|
||||
|
||||
// Mock folders data
|
||||
const folders = [
|
||||
@ -380,136 +381,175 @@ export default function MailPage() {
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white/95 backdrop-blur-sm border-b border-gray-100 py-3 px-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex-1 max-w-xl">
|
||||
<div className="relative">
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search emails..."
|
||||
className="pl-9 bg-gray-50 border-0"
|
||||
/>
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Email list */}
|
||||
<div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
|
||||
<div className="p-4 border-b border-gray-100 flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold text-gray-800 capitalize">
|
||||
{currentView === 'starred' ? 'Starred' : currentView}
|
||||
</h2>
|
||||
<div className="text-sm text-gray-500">
|
||||
{filteredEmails.length} emails
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Email list and detail view */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Email list */}
|
||||
<div className={`${selectedEmail ? 'hidden md:block md:w-[380px]' : 'w-full'} bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto`}>
|
||||
<div className="p-4 border-b border-gray-100 flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold text-gray-800 capitalize">
|
||||
{currentView === 'starred' ? 'Starred' : currentView}
|
||||
</h2>
|
||||
<div className="text-sm text-gray-500">
|
||||
{filteredEmails.length} emails
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{filteredEmails.length > 0 ? (
|
||||
<ul>
|
||||
{filteredEmails.map(email => (
|
||||
<li
|
||||
key={email.id}
|
||||
className={`border-b border-gray-100 cursor-pointer ${email.read ? 'bg-white/95' : 'bg-blue-50/95'} hover:bg-gray-50/95`}
|
||||
onClick={() => handleEmailClick(email.id)}
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<div className="flex items-center">
|
||||
<div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
|
||||
<span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{formatDate(email.date)}</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<h3 className={`${!email.read ? 'font-semibold' : ''} text-gray-800`}>{email.subject}</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-500"
|
||||
onClick={(e) => toggleStarred(email.id, e)}
|
||||
>
|
||||
<Star className="h-4 w-4" fill={email.starred ? 'currentColor' : 'none'} color={email.starred ? '#F59E0B' : 'currentColor'} />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 truncate">
|
||||
{email.body}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-64 text-gray-500">
|
||||
<Mail className="h-12 w-12 mb-4 opacity-30" />
|
||||
<p>No emails in this folder</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email detail view */}
|
||||
{selectedEmail ? (
|
||||
<div className="flex-1 overflow-y-auto bg-white p-6">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{getSelectedEmail() && (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-xl font-bold">{getSelectedEmail()?.subject}</h1>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-400"
|
||||
onClick={(e) => getSelectedEmail() && toggleStarred(getSelectedEmail()!.id, e)}
|
||||
>
|
||||
<Star className="h-5 w-5" fill={getSelectedEmail()?.starred ? 'currentColor' : 'none'} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{filteredEmails.length > 0 ? (
|
||||
<ul>
|
||||
{filteredEmails.map(email => (
|
||||
<li
|
||||
key={email.id}
|
||||
className={`border-b border-gray-100 cursor-pointer ${email.read ? 'bg-white/95' : 'bg-blue-50/95'} hover:bg-gray-50/95`}
|
||||
onClick={() => handleEmailClick(email.id)}
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<div className="flex items-center">
|
||||
<Avatar>
|
||||
<AvatarFallback className={`${getAccountColor(getSelectedEmail()!.accountId)}`}>
|
||||
{getSelectedEmail()?.fromName.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="ml-3">
|
||||
<div className="font-medium">{getSelectedEmail()?.fromName}</div>
|
||||
<div className="text-sm text-gray-500 flex items-center">
|
||||
<span>{getSelectedEmail()?.from}</span>
|
||||
<span className="mx-2">•</span>
|
||||
<span>{new Date(getSelectedEmail()!.date).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}</span>
|
||||
<div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
|
||||
<span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{formatDate(email.date)}</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<h3 className={`${!email.read ? 'font-semibold' : ''} text-gray-800`}>{email.subject}</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-500"
|
||||
onClick={(e) => toggleStarred(email.id, e)}
|
||||
>
|
||||
<Star className="h-4 w-4" fill={email.starred ? 'currentColor' : 'none'} color={email.starred ? '#F59E0B' : 'currentColor'} />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 truncate">
|
||||
{email.body}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-64 text-gray-500">
|
||||
<Mail className="h-12 w-12 mb-4 opacity-30" />
|
||||
<p>No emails in this folder</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email detail view - Always visible */}
|
||||
<div className="flex-1 overflow-y-auto bg-white">
|
||||
{selectedEmail ? (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Email actions header */}
|
||||
<div className="p-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700"
|
||||
>
|
||||
<Reply className="h-4 w-4 mr-2" />
|
||||
Reply
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700"
|
||||
>
|
||||
<ReplyAll className="h-4 w-4 mr-2" />
|
||||
Reply all
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700"
|
||||
>
|
||||
<Forward className="h-4 w-4 mr-2" />
|
||||
Forward
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
onClick={() => setShowEmailActions(!showEmailActions)}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
{showEmailActions && (
|
||||
<div className="absolute right-4 mt-32 w-48 bg-white border border-gray-100 shadow-lg rounded-lg z-50">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
|
||||
onClick={() => {
|
||||
// Handle move to folder
|
||||
setShowEmailActions(false);
|
||||
}}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4 mr-2" />
|
||||
Move to folder
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
|
||||
onClick={() => {
|
||||
// Handle delete email
|
||||
setShowEmailActions(false);
|
||||
}}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email content */}
|
||||
<div className="flex-1 p-6">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{getSelectedEmail() && (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-xl font-bold">{getSelectedEmail()?.subject}</h1>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-400"
|
||||
onClick={(e) => getSelectedEmail() && toggleStarred(getSelectedEmail()!.id, e)}
|
||||
>
|
||||
<Star className="h-5 w-5" fill={getSelectedEmail()?.starred ? 'currentColor' : 'none'} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<Avatar>
|
||||
<AvatarFallback className={`${getAccountColor(getSelectedEmail()!.accountId)}`}>
|
||||
{getSelectedEmail()?.fromName.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="ml-3">
|
||||
<div className="font-medium">{getSelectedEmail()?.fromName}</div>
|
||||
<div className="text-sm text-gray-500 flex items-center">
|
||||
<span>{getSelectedEmail()?.from}</span>
|
||||
<span className="mx-2">•</span>
|
||||
<span>{new Date(getSelectedEmail()!.date).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 pt-6 prose max-w-none">
|
||||
<p>{getSelectedEmail()?.body}</p>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-gray-200">
|
||||
<div className="flex space-x-4">
|
||||
<Button variant="outline" className="flex items-center gap-2">
|
||||
<Send className="h-4 w-4" />
|
||||
Reply
|
||||
</Button>
|
||||
<Button variant="outline" className="flex items-center gap-2">
|
||||
<Send className="h-4 w-4" />
|
||||
Forward
|
||||
</Button>
|
||||
|
||||
<div className="border-t border-gray-200 pt-6 prose max-w-none">
|
||||
<p>{getSelectedEmail()?.body}</p>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="hidden md:flex flex-1 items-center justify-center bg-gray-50">
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Mail className="h-16 w-16 mx-auto mb-4 text-gray-300" />
|
||||
<p className="text-gray-500">No email selected</p>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user