From 9eaa2753d8bedd2c276c4c0be9a0187ef9d61b45 Mon Sep 17 00:00:00 2001 From: alma Date: Tue, 15 Apr 2025 15:50:06 +0200 Subject: [PATCH] mail page custum --- app/mail/page.tsx | 453 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 453 insertions(+) create mode 100644 app/mail/page.tsx diff --git a/app/mail/page.tsx b/app/mail/page.tsx new file mode 100644 index 0000000..ecb20e6 --- /dev/null +++ b/app/mail/page.tsx @@ -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([ + { 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([ + { + 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(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 ( +
+ {/* Sidebar */} +
+ {/* Logo and toggle */} +
+ {sidebarOpen &&

MailBox

} + +
+ + {/* Compose button */} + + + {/* Navigation */} + + + {/* Settings */} +
+ +
+
+ + {/* Main content */} +
+ {/* Header */} +
+
+
+
+ + +
+
+ +
+
+ + {/* Email list and detail view */} +
+ {/* Email list */} +
+
+

+ {currentView === 'starred' ? 'Starred' : currentView} +

+
+ {filteredEmails.length} emails +
+
+ + {filteredEmails.length > 0 ? ( +
    + {filteredEmails.map(email => ( +
  • handleEmailClick(email.id)} + > +
    +
    +
    +
    + {email.fromName} +
    +
    {formatDate(email.date)}
    +
    +
    +

    {email.subject}

    + +
    +

    + {email.body} +

    +
    +
    • + ))} +
+ ) : ( +
+ +

No emails in this folder

+
+ )} +
+ + {/* Email detail view */} + {selectedEmail ? ( +
+
+ {getSelectedEmail() && ( + <> +
+
+

{getSelectedEmail()?.subject}

+ +
+ +
+ + + {getSelectedEmail()?.fromName.charAt(0)} + + +
+
{getSelectedEmail()?.fromName}
+
+ {getSelectedEmail()?.from} + • + {new Date(getSelectedEmail()!.date).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })} +
+
+
+
+ +
+

{getSelectedEmail()?.body}

+
+ +
+
+ + +
+
+ + )} +
+
+ ) : ( +
+
+ +

Select an email to read

+
+
+ )} +
+
+ + {/* Compose email modal */} + {composeOpen && ( +
+ + + New Message + + + +
+
+ + +
+
+ + +
+
+ + +
+
+ +