36 lines
1.2 KiB
TypeScript
36 lines
1.2 KiB
TypeScript
import { Mail } from '@/hooks/use-mail';
|
|
|
|
interface MailListProps {
|
|
mails: Mail[];
|
|
onMailClick: (mail: Mail) => void;
|
|
}
|
|
|
|
export const MailList = ({ mails, onMailClick }: MailListProps) => {
|
|
return (
|
|
<div className="flex flex-col space-y-2">
|
|
{mails.map((mail) => (
|
|
<div
|
|
key={mail.id}
|
|
className={`p-4 border rounded-lg cursor-pointer hover:bg-gray-50 ${
|
|
!mail.read ? 'font-semibold' : ''
|
|
}`}
|
|
onClick={() => onMailClick(mail)}
|
|
>
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex-1">
|
|
<div className="flex items-center space-x-2">
|
|
<span className="text-sm text-gray-600">{mail.from}</span>
|
|
{mail.starred && (
|
|
<span className="text-yellow-400">★</span>
|
|
)}
|
|
</div>
|
|
<h3 className="text-lg font-medium">{mail.subject}</h3>
|
|
<p className="text-sm text-gray-500 truncate">{mail.body}</p>
|
|
</div>
|
|
<span className="text-sm text-gray-400">{new Date(mail.date).toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|