60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
import { Mail } from "@/types/mail";
|
|
import { Star, StarOff, Paperclip } from "lucide-react";
|
|
import { format } from "date-fns";
|
|
|
|
interface MailListProps {
|
|
mails: Mail[];
|
|
onMailClick: (mail: Mail) => void;
|
|
}
|
|
|
|
export function MailList({ mails, onMailClick }: MailListProps) {
|
|
if (!mails || mails.length === 0) {
|
|
return (
|
|
<div className="flex items-center justify-center h-64">
|
|
<p className="text-gray-500">No emails found</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col space-y-2">
|
|
{mails.map((mail) => (
|
|
<div
|
|
key={mail.id}
|
|
className={`p-4 rounded-lg cursor-pointer transition-colors ${
|
|
mail.read ? 'bg-white' : 'bg-blue-50'
|
|
} hover:bg-gray-50`}
|
|
onClick={() => onMailClick(mail)}
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex-1 min-w-0">
|
|
<div className="flex items-center space-x-2">
|
|
<div className="font-medium text-gray-900 truncate">
|
|
{mail.from}
|
|
</div>
|
|
{mail.starred && (
|
|
<Star className="h-4 w-4 text-yellow-400" />
|
|
)}
|
|
</div>
|
|
<div className="mt-1 text-sm font-medium text-gray-900">
|
|
{mail.subject}
|
|
</div>
|
|
<div className="mt-1 text-sm text-gray-500 line-clamp-2">
|
|
{mail.body}
|
|
</div>
|
|
{mail.attachments && mail.attachments.length > 0 && (
|
|
<div className="mt-2 flex items-center text-sm text-gray-500">
|
|
<Paperclip className="h-4 w-4 mr-1" />
|
|
{mail.attachments.length} attachment{mail.attachments.length !== 1 ? 's' : ''}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="ml-4 text-sm text-gray-500">
|
|
{format(new Date(mail.date), 'MMM d, yyyy')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|