dashboard completed

src/components/recentPosts.tsx

@@ -1,13 +1,16 @@
 import { PlatformKind } from '@/utils';
 import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
+import { PlatformIcon } from './icons';
+import { format } from 'date-fns';
 
 export default function RecentPosts({
     posts,
 }: {
     posts: {
         platform: PlatformKind;
+        profileUrl: string;
         name: string;
-        username: string;
+        date: Date;
         content: string;
     }[];
 }) {
@@ -17,24 +20,36 @@ export default function RecentPosts({
                 <CardTitle>Recent posts</CardTitle>
             </CardHeader>
 
-            <CardContent className="w-full flex flex-col gap-5">
+            <CardContent className="w-full grid grid-rows-2 gap-4 items-stretch">
                 {posts.map((post, i) => (
+                    // <div className="border flex flex-col h-full p-4 rounded-xl" key={i}>
+                    //     {post.content}
+                    // </div>
                     <div
                         key={i}
-                        className="flex-1 flex flex-col w-full border p-3 rounded-xl"
+                        className="border flex flex-col h-full p-4 rounded-xl"
                     >
                         <div className="relative">
                             <div className="flex items-center w-full">
                                 <img
-                                    src="/pfp"
+                                    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">
-                            <p>{post.content}</p>
+                        <div className="w-full mt-2 flex-1">
+                            <p className="line-clamp-2">{post.content}</p>
                         </div>
                     </div>
                 ))}