68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Inbox, Send, Star, Trash, Folder,
|
|
AlertOctagon, Archive, Edit
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface EmailSidebarContentProps {
|
|
mailboxes: string[];
|
|
currentFolder: string;
|
|
onFolderChange: (folder: string) => void;
|
|
}
|
|
|
|
export default function EmailSidebarContent({
|
|
mailboxes,
|
|
currentFolder,
|
|
onFolderChange
|
|
}: EmailSidebarContentProps) {
|
|
|
|
// Helper to format folder names
|
|
const formatFolderName = (folder: string) => {
|
|
return folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase();
|
|
};
|
|
|
|
// Helper to get folder icons
|
|
const getFolderIcon = (folder: string) => {
|
|
const folderLower = folder.toLowerCase();
|
|
|
|
if (folderLower.includes('inbox')) {
|
|
return <Inbox className="h-4 w-4" />;
|
|
} else if (folderLower.includes('sent')) {
|
|
return <Send className="h-4 w-4" />;
|
|
} else if (folderLower.includes('trash')) {
|
|
return <Trash className="h-4 w-4" />;
|
|
} else if (folderLower.includes('archive')) {
|
|
return <Archive className="h-4 w-4" />;
|
|
} else if (folderLower.includes('draft')) {
|
|
return <Edit className="h-4 w-4" />;
|
|
} else if (folderLower.includes('spam') || folderLower.includes('junk')) {
|
|
return <AlertOctagon className="h-4 w-4" />;
|
|
} else {
|
|
return <Folder className="h-4 w-4" />;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<nav className="p-3">
|
|
<ul className="space-y-0.5 px-2">
|
|
{mailboxes.map((folder) => (
|
|
<li key={folder}>
|
|
<Button
|
|
variant={currentFolder === folder ? 'secondary' : 'ghost'}
|
|
className={`w-full justify-start py-2 ${
|
|
currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
|
}`}
|
|
onClick={() => onFolderChange(folder)}
|
|
>
|
|
<div className="flex items-center">
|
|
{getFolderIcon(folder)}
|
|
<span className="ml-2">{formatFolderName(folder)}</span>
|
|
</div>
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
);
|
|
}
|