mail page custum
This commit is contained in:
parent
dfd1ab9f4f
commit
9eaa2753d8
453
app/mail/page.tsx
Normal file
453
app/mail/page.tsx
Normal file
@ -0,0 +1,453 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
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 { Mail, Inbox, Send, Star, Trash, Settings, Plus, Menu, Search, User, X } from 'lucide-react';
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
interface Email {
|
||||
id: number;
|
||||
accountId: number;
|
||||
from: string;
|
||||
fromName: string;
|
||||
to: string;
|
||||
subject: string;
|
||||
body: string;
|
||||
date: string;
|
||||
read: boolean;
|
||||
starred: boolean;
|
||||
category: string;
|
||||
}
|
||||
|
||||
export default function MailPage() {
|
||||
// Mock data for email accounts
|
||||
const [accounts, setAccounts] = useState<Account[]>([
|
||||
{ id: 1, name: 'Work', email: 'john.doe@company.com', color: 'bg-blue-500' },
|
||||
{ id: 2, name: 'Personal', email: 'johndoe@gmail.com', color: 'bg-green-500' },
|
||||
{ id: 3, name: 'Side Project', email: 'john@sideproject.io', color: 'bg-purple-500' }
|
||||
]);
|
||||
|
||||
// Mock data for emails
|
||||
const [emails, setEmails] = useState<Email[]>([
|
||||
{
|
||||
id: 1,
|
||||
accountId: 1,
|
||||
from: 'sarah@company.com',
|
||||
fromName: 'Sarah Johnson',
|
||||
to: 'john.doe@company.com',
|
||||
subject: 'Project Status Update',
|
||||
body: 'Hi John, here is the latest update on the project. We have completed the first phase and are moving to the second phase.',
|
||||
date: '2025-04-15T10:30:00',
|
||||
read: false,
|
||||
starred: true,
|
||||
category: 'inbox'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
accountId: 1,
|
||||
from: 'mike@company.com',
|
||||
fromName: 'Mike Chen',
|
||||
to: 'john.doe@company.com',
|
||||
subject: 'Meeting Tomorrow',
|
||||
body: 'Don\'t forget we have a team meeting tomorrow at 10am in Conference Room A.',
|
||||
date: '2025-04-14T16:45:00',
|
||||
read: true,
|
||||
starred: false,
|
||||
category: 'inbox'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
accountId: 2,
|
||||
from: 'lisa@gmail.com',
|
||||
fromName: 'Lisa Smith',
|
||||
to: 'johndoe@gmail.com',
|
||||
subject: 'Weekend Plans',
|
||||
body: 'Hey, are you free this weekend? I was thinking we could go hiking at the national park.',
|
||||
date: '2025-04-13T09:15:00',
|
||||
read: false,
|
||||
starred: false,
|
||||
category: 'inbox'
|
||||
}
|
||||
]);
|
||||
|
||||
const [selectedAccount, setSelectedAccount] = useState(1);
|
||||
const [currentView, setCurrentView] = useState('inbox');
|
||||
const [selectedEmail, setSelectedEmail] = useState<number | null>(null);
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||||
const [composeOpen, setComposeOpen] = useState(false);
|
||||
|
||||
// Filter emails based on selected account and view
|
||||
const filteredEmails = emails.filter(email =>
|
||||
email.accountId === selectedAccount &&
|
||||
(currentView === 'starred' ? email.starred : email.category === currentView)
|
||||
);
|
||||
|
||||
// Handle email selection
|
||||
const handleEmailClick = (emailId: number) => {
|
||||
const updatedEmails = emails.map(email =>
|
||||
email.id === emailId ? { ...email, read: true } : email
|
||||
);
|
||||
setEmails(updatedEmails);
|
||||
setSelectedEmail(emailId);
|
||||
};
|
||||
|
||||
// Toggle starred status
|
||||
const toggleStarred = (emailId: number, e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
const updatedEmails = emails.map(email =>
|
||||
email.id === emailId ? { ...email, starred: !email.starred } : email
|
||||
);
|
||||
setEmails(updatedEmails);
|
||||
};
|
||||
|
||||
// Format date for display
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString);
|
||||
const now = new Date();
|
||||
|
||||
if (date.toDateString() === now.toDateString()) {
|
||||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||||
} else {
|
||||
return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
|
||||
}
|
||||
};
|
||||
|
||||
// Get selected email
|
||||
const getSelectedEmail = () => {
|
||||
return emails.find(email => email.id === selectedEmail);
|
||||
};
|
||||
|
||||
// Get account color
|
||||
const getAccountColor = (accountId: number) => {
|
||||
const account = accounts.find(acc => acc.id === accountId);
|
||||
return account ? account.color : 'bg-gray-500';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-screen bg-gray-50 text-gray-900 overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<div className={`${sidebarOpen ? 'w-64' : 'w-20'} bg-white border-r border-gray-200 flex flex-col transition-all duration-300 ease-in-out
|
||||
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||||
{/* Logo and toggle */}
|
||||
<div className="p-4 flex items-center justify-between border-b border-gray-200">
|
||||
{sidebarOpen && <h1 className="text-xl font-bold text-blue-600">MailBox</h1>}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hidden md:flex"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
>
|
||||
{sidebarOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Compose button */}
|
||||
<Button
|
||||
className={`m-4 bg-blue-600 text-white rounded-full shadow hover:bg-blue-700 flex items-center justify-center transition-all ${sidebarOpen ? 'py-3 px-6' : 'p-3'}`}
|
||||
onClick={() => setComposeOpen(true)}
|
||||
>
|
||||
{sidebarOpen ? (
|
||||
<div className="flex items-center">
|
||||
<Plus className="h-4 w-4" />
|
||||
<span className="ml-2">Compose</span>
|
||||
</div>
|
||||
) : (
|
||||
<Plus className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto py-4">
|
||||
<ul className="space-y-1">
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Inbox className="h-4 w-4 mr-2" />
|
||||
{sidebarOpen && <span>Inbox</span>}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Star className="h-4 w-4 mr-2" />
|
||||
{sidebarOpen && <span>Starred</span>}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
{sidebarOpen && <span>Sent</span>}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Trash className="h-4 w-4 mr-2" />
|
||||
{sidebarOpen && <span>Trash</span>}
|
||||
</Button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{/* Account selection */}
|
||||
{sidebarOpen && (
|
||||
<div className="mt-8 px-4">
|
||||
<h2 className="text-xs uppercase text-gray-500 font-semibold mb-2">Accounts</h2>
|
||||
<ul className="space-y-1">
|
||||
{accounts.map(account => (
|
||||
<li key={account.id}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className={`w-full justify-start px-3 py-2 ${selectedAccount === account.id ? 'bg-gray-100' : ''}`}
|
||||
onClick={() => {setSelectedAccount(account.id); setSelectedEmail(null);}}
|
||||
>
|
||||
<div className={`w-3 h-3 rounded-full ${account.color} mr-3`}></div>
|
||||
<div className="text-left">
|
||||
<div className="font-medium">{account.name}</div>
|
||||
<div className="text-xs text-gray-500">{account.email}</div>
|
||||
</div>
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Settings */}
|
||||
<div className="p-4 border-t border-gray-200">
|
||||
<Button variant="ghost" className={`${sidebarOpen ? 'w-full' : 'justify-center'}`}>
|
||||
<Settings className="h-4 w-4" />
|
||||
{sidebarOpen && <span className="ml-3">Settings</span>}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 py-4 px-6">
|
||||
<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-10"
|
||||
/>
|
||||
<Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="ghost" size="icon" className="ml-4">
|
||||
<User className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Email list and detail view */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Email list */}
|
||||
<div className={`${selectedEmail ? 'hidden md:block md:w-1/3 xl:w-2/5' : 'w-full'} bg-white border-r border-gray-200 overflow-y-auto`}>
|
||||
<div className="p-4 border-b border-gray-200 flex justify-between items-center">
|
||||
<h2 className="text-lg font-semibold 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' : 'bg-blue-50'} hover:bg-gray-50`}
|
||||
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' : ''}`}>{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' : ''}`}>{email.subject}</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-400"
|
||||
onClick={(e) => toggleStarred(email.id, e)}
|
||||
>
|
||||
<Star className="h-4 w-4" fill={email.starred ? 'currentColor' : 'none'} />
|
||||
</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>
|
||||
|
||||
<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 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>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="hidden md:flex flex-1 items-center justify-center bg-gray-50 text-gray-500">
|
||||
<div className="text-center">
|
||||
<Mail className="h-16 w-16 mx-auto mb-4 opacity-30" />
|
||||
<p>Select an email to read</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compose email modal */}
|
||||
{composeOpen && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-25 flex items-center justify-center p-4 z-50">
|
||||
<Card className="w-full max-w-2xl">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<CardTitle>New Message</CardTitle>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setComposeOpen(false)}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">From</label>
|
||||
<select className="w-full border border-gray-300 rounded-lg px-3 py-2">
|
||||
{accounts.map(account => (
|
||||
<option key={account.id} value={account.id}>
|
||||
{account.name} ({account.email})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">To</label>
|
||||
<Input type="email" placeholder="email@example.com" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Subject</label>
|
||||
<Input type="text" placeholder="Subject" />
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">Message</label>
|
||||
<Textarea
|
||||
className="h-48"
|
||||
placeholder="Write your message here..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-6 flex justify-end space-x-3">
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setComposeOpen(false)}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={() => setComposeOpen(false)}
|
||||
>
|
||||
Send
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user