57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import { PlatformKind } from '@/utils';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { PlatformIcon } from '@/components/icons';
|
|
import { format } from 'date-fns';
|
|
|
|
export default function RecentPosts({
|
|
posts,
|
|
}: {
|
|
posts: {
|
|
platform: PlatformKind;
|
|
profileUrl: string;
|
|
name: string;
|
|
date: Date;
|
|
content: string;
|
|
}[];
|
|
}) {
|
|
return (
|
|
<Card className="flex flex-col flex-grow">
|
|
<CardHeader>
|
|
<CardTitle>Recent posts</CardTitle>
|
|
</CardHeader>
|
|
|
|
<CardContent className="w-full h-full grid grid-rows-2 gap-4 items-stretch">
|
|
{posts.map((post, i) => (
|
|
<div
|
|
key={i}
|
|
className="border flex flex-col h-full p-4 rounded-xl"
|
|
>
|
|
<div className="relative">
|
|
<div className="flex items-center w-full">
|
|
<img
|
|
src={post.profileUrl}
|
|
alt="PFP"
|
|
className="size-12 rounded-full"
|
|
/>
|
|
<p className="ml-4">{post.name}</p>
|
|
<PlatformIcon
|
|
platform={post.platform}
|
|
width={20}
|
|
height={20}
|
|
className="ml-1"
|
|
/>
|
|
<p className="ml-1 text-muted-foreground">
|
|
{format(post.date, 'MMM dd h:mm aa')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="w-full mt-2 flex-1">
|
|
<p className="line-clamp-2">{post.content}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|