59 lines
1.9 KiB
TypeScript
59 lines
1.9 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-1 overflow-auto">
|
|
{mails.map((mail) => (
|
|
<div
|
|
key={mail.id}
|
|
className={`p-4 border-b cursor-pointer hover:bg-muted ${
|
|
!mail.read ? "bg-muted/50" : ""
|
|
}`}
|
|
onClick={() => onMailClick(mail)}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-2">
|
|
{mail.starred ? (
|
|
<Star className="h-4 w-4 text-yellow-400" />
|
|
) : (
|
|
<StarOff className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
<span className="font-medium">{mail.from}</span>
|
|
</div>
|
|
<span className="text-sm text-muted-foreground">
|
|
{format(new Date(mail.date), "MMM d, yyyy")}
|
|
</span>
|
|
</div>
|
|
<div className="mt-2">
|
|
<h3 className="font-medium">{mail.subject}</h3>
|
|
<p className="text-sm text-muted-foreground line-clamp-2">
|
|
{mail.body}
|
|
</p>
|
|
</div>
|
|
{mail.attachments && mail.attachments.length > 0 && (
|
|
<div className="mt-2 flex items-center text-sm text-muted-foreground">
|
|
<Paperclip className="h-3 w-3 mr-1" />
|
|
{mail.attachments.length} attachment
|
|
{mail.attachments.length > 1 ? "s" : ""}
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|