mail page custum 6
This commit is contained in:
parent
c1e8cdeac6
commit
cace79a931
@ -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 { 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 } from 'lucide-react';
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
@ -88,6 +88,7 @@ export default function MailPage() {
|
||||
const [composeOpen, setComposeOpen] = useState(false);
|
||||
const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
|
||||
const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
|
||||
const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
|
||||
|
||||
// Mock folders data
|
||||
const folders = [
|
||||
@ -97,9 +98,15 @@ export default function MailPage() {
|
||||
{ id: 4, name: 'Archive' }
|
||||
];
|
||||
|
||||
// Modified accounts array with "All" option
|
||||
const allAccounts = [
|
||||
{ id: 0, name: 'All', email: '', color: 'bg-gray-500' },
|
||||
...accounts
|
||||
];
|
||||
|
||||
// Filter emails based on selected account and view
|
||||
const filteredEmails = emails.filter(email =>
|
||||
email.accountId === selectedAccount &&
|
||||
(selectedAccount === 0 || email.accountId === selectedAccount) &&
|
||||
(currentView === 'starred' ? email.starred : email.category === currentView)
|
||||
);
|
||||
|
||||
@ -144,6 +151,17 @@ export default function MailPage() {
|
||||
return account ? account.color : 'bg-gray-500';
|
||||
};
|
||||
|
||||
const handleAccountAction = (accountId: number, action: 'edit' | 'delete') => {
|
||||
setShowAccountActions(null);
|
||||
if (action === 'delete') {
|
||||
setAccounts(accounts.filter(acc => acc.id !== accountId));
|
||||
if (selectedAccount === accountId) {
|
||||
setSelectedAccount(0);
|
||||
}
|
||||
}
|
||||
// Handle edit in a real application
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
||||
{/* Sidebar */}
|
||||
@ -192,25 +210,74 @@ export default function MailPage() {
|
||||
{/* Accounts Dropdown */}
|
||||
{accountsDropdownOpen && sidebarOpen && (
|
||||
<div className="absolute top-full left-0 w-full bg-white border border-gray-100 shadow-lg rounded-b-lg z-50">
|
||||
{accounts.map(account => (
|
||||
<Button
|
||||
key={account.id}
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm"
|
||||
onClick={() => {
|
||||
setSelectedAccount(account.id);
|
||||
setAccountsDropdownOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="font-medium">{account.name}</span>
|
||||
<span className="text-xs text-gray-500">{account.email}</span>
|
||||
{allAccounts.map(account => (
|
||||
<div key={account.id} className="relative group">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm"
|
||||
onClick={() => {
|
||||
setSelectedAccount(account.id);
|
||||
setAccountsDropdownOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<div className="flex flex-col items-start flex-1">
|
||||
<span className="font-medium">{account.name}</span>
|
||||
{account.email && <span className="text-xs text-gray-500">{account.email}</span>}
|
||||
</div>
|
||||
{account.id !== 0 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="opacity-0 group-hover:opacity-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowAccountActions(account.id);
|
||||
}}
|
||||
>
|
||||
<MoreVertical className="h-4 w-4 text-gray-500" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</Button>
|
||||
|
||||
{/* Account Actions Dropdown */}
|
||||
{showAccountActions === account.id && account.id !== 0 && (
|
||||
<div className="absolute right-0 mt-1 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={() => handleAccountAction(account.id, 'edit')}
|
||||
>
|
||||
<Edit className="h-4 w-4 mr-2" />
|
||||
Edit account
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
|
||||
onClick={() => handleAccountAction(account.id, 'delete')}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-2" />
|
||||
Remove account
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{/* Add Account Button */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm text-blue-600 hover:text-blue-700 border-t border-gray-100"
|
||||
onClick={() => {
|
||||
setAccountsDropdownOpen(false);
|
||||
// Handle add account in a real application
|
||||
}}
|
||||
>
|
||||
<PlusIcon className="h-4 w-4 mr-2" />
|
||||
Add account
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -222,11 +289,11 @@ export default function MailPage() {
|
||||
>
|
||||
{sidebarOpen ? (
|
||||
<div className="flex items-center">
|
||||
<Plus className="h-4 w-4" />
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
<span className="ml-2">Compose</span>
|
||||
</div>
|
||||
) : (
|
||||
<Plus className="h-4 w-4" />
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
@ -333,7 +400,7 @@ 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-2/5 xl:w-1/2' : 'w-full'} bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto`}>
|
||||
<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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user