structuring

2025-02-19 20:23:34 +01:00
parent 4af62033c6
commit 4fa5d97ae9
10 changed files with 38 additions and 79 deletions
@@ -0,0 +1,56 @@
+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>
+    );
+}