mail page custum 2
This commit is contained in:
parent
9eaa2753d8
commit
9dd31bf3df
@ -137,15 +137,15 @@ export default function MailPage() {
|
||||
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
|
||||
<div className={`${sidebarOpen ? 'w-64' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg 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>}
|
||||
<div className="p-3 flex items-center justify-between border-b border-gray-100">
|
||||
{sidebarOpen && <h1 className="text-lg font-semibold text-gray-800">Mail</h1>}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hidden md:flex"
|
||||
className="hidden md:flex text-gray-600"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
>
|
||||
{sidebarOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
|
||||
@ -154,7 +154,7 @@ export default function MailPage() {
|
||||
|
||||
{/* 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'}`}
|
||||
className={`mx-3 mt-3 mb-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all ${sidebarOpen ? 'py-2 px-4' : 'p-2'}`}
|
||||
onClick={() => setComposeOpen(true)}
|
||||
>
|
||||
{sidebarOpen ? (
|
||||
@ -168,12 +168,12 @@ export default function MailPage() {
|
||||
</Button>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto py-4">
|
||||
<ul className="space-y-1">
|
||||
<nav className="flex-1 overflow-y-auto py-2">
|
||||
<ul className="space-y-0.5 px-2">
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||
onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Inbox className="h-4 w-4 mr-2" />
|
||||
@ -183,7 +183,7 @@ export default function MailPage() {
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||
onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Star className="h-4 w-4 mr-2" />
|
||||
@ -193,7 +193,7 @@ export default function MailPage() {
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||
onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
@ -203,7 +203,7 @@ export default function MailPage() {
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||
onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Trash className="h-4 w-4 mr-2" />
|
||||
@ -214,19 +214,19 @@ export default function MailPage() {
|
||||
|
||||
{/* Account selection */}
|
||||
{sidebarOpen && (
|
||||
<div className="mt-8 px-4">
|
||||
<h2 className="text-xs uppercase text-gray-500 font-semibold mb-2">Accounts</h2>
|
||||
<div className="mt-6 px-4">
|
||||
<h2 className="text-xs uppercase text-gray-500 font-semibold mb-2 px-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' : ''}`}
|
||||
className={`w-full justify-start px-3 py-2 ${selectedAccount === account.id ? 'bg-gray-100' : ''} hover:bg-gray-50`}
|
||||
onClick={() => {setSelectedAccount(account.id); setSelectedEmail(null);}}
|
||||
>
|
||||
<div className={`w-3 h-3 rounded-full ${account.color} mr-3`}></div>
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color} mr-3`}></div>
|
||||
<div className="text-left">
|
||||
<div className="font-medium">{account.name}</div>
|
||||
<div className="font-medium text-sm">{account.name}</div>
|
||||
<div className="text-xs text-gray-500">{account.email}</div>
|
||||
</div>
|
||||
</Button>
|
||||
@ -238,8 +238,8 @@ export default function MailPage() {
|
||||
</nav>
|
||||
|
||||
{/* Settings */}
|
||||
<div className="p-4 border-t border-gray-200">
|
||||
<Button variant="ghost" className={`${sidebarOpen ? 'w-full' : 'justify-center'}`}>
|
||||
<div className="p-3 border-t border-gray-100">
|
||||
<Button variant="ghost" className={`${sidebarOpen ? 'w-full' : 'justify-center'} text-gray-600 hover:text-gray-900`}>
|
||||
<Settings className="h-4 w-4" />
|
||||
{sidebarOpen && <span className="ml-3">Settings</span>}
|
||||
</Button>
|
||||
@ -247,21 +247,21 @@ export default function MailPage() {
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 flex flex-col overflow-hidden">
|
||||
<div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 py-4 px-6">
|
||||
<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-10"
|
||||
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>
|
||||
<Button variant="ghost" size="icon" className="ml-4">
|
||||
<Button variant="ghost" size="icon" className="ml-4 text-gray-600">
|
||||
<User className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
@ -270,9 +270,9 @@ export default function MailPage() {
|
||||
{/* 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">
|
||||
<div className={`${selectedEmail ? 'hidden md:block md:w-1/3 xl:w-2/5' : '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">
|
||||
@ -285,26 +285,26 @@ export default function MailPage() {
|
||||
{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`}
|
||||
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' : ''}`}>{email.fromName}</span>
|
||||
<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' : ''}`}>{email.subject}</h3>
|
||||
<h3 className={`${!email.read ? 'font-semibold' : ''} text-gray-800`}>{email.subject}</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-400"
|
||||
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'} />
|
||||
<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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user