From 1b04a653338414c457187ee7897431a8de565f54 Mon Sep 17 00:00:00 2001
From: Leo dev <klesti.selimay@icloud.com>
Date: Sat, 15 Feb 2025 21:38:09 +0100
Subject: [PATCH] dashboard completed

---
 src/app/dashboard/page.tsx     | 41 +++++++++++++++++++++-------------
 src/components/recentPosts.tsx | 27 +++++++++++++++++-----
 src/utils.ts                   |  2 +-
 3 files changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
index c31e65f..351b0a0 100644
--- a/src/app/dashboard/page.tsx
+++ b/src/app/dashboard/page.tsx
@@ -1,16 +1,14 @@
+import AccountStatus from '@/components/accountStatus';
 import Engagement from '@/components/engagement';
 import Ideas from '@/components/ideas';
 import RecentPosts from '@/components/recentPosts';
 import { Calendar } from '@/components/ui/calendar';
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
 
 import {
     SidebarProvider,
     Sidebar,
     SidebarContent,
 } from '@/components/ui/sidebar';
-import { DayPicker } from 'react-day-picker';
 
 export default function Dashboard() {
     return (
@@ -60,16 +58,24 @@ export default function Dashboard() {
                                 },
                             ]}
                         />
-                        <Ideas
-                            ideas={[
+                        <AccountStatus
+                            accounts={[
                                 {
-                                    idea: 'The recent Linus tech tips drama',
-                                    checked: true,
+                                    name: 'Klesti Selimaj',
+                                    ok: true,
+                                    platform: 'linkedin',
                                 },
-                                { idea: 'Code reviews', checked: false },
+
                                 {
-                                    idea: 'How to build charts in react',
-                                    checked: false,
+                                    name: 'Klesti Selimaj',
+                                    ok: true,
+                                    platform: 'x',
+                                },
+
+                                {
+                                    name: 'Leo Codes',
+                                    ok: false,
+                                    platform: 'x',
                                 },
                             ]}
                         />
@@ -78,17 +84,20 @@ export default function Dashboard() {
                         posts={[
                             {
                                 platform: 'x',
-                                name: 'Leo Codes',
-                                username: 'leo.codes',
+                                name: 'Klesti Selimaj',
+                                profileUrl:
+                                    'https://media.licdn.com/dms/image/v2/D5603AQE1lZ2aRsKrhw/profile-displayphoto-shrink_400_400/B56ZRxUoLuHoAg-/0/1737068022127?e=1744848000&v=beta&t=k2T9tdzNyJMmSO8GsT6D2qQmYUQxJRsHbooywDxEDJQ',
                                 content:
                                     "The linus tech tips drama is complex, don't know who to blame, they should try to figure this out privately",
+                                date: new Date(),
                             },
                             {
                                 platform: 'x',
-                                name: 'Leo Codes',
-                                username: 'leo.codes',
-                                content:
-                                    "Hello, world",
+                                name: 'Klesti Selimaj',
+                                profileUrl:
+                                    'https://media.licdn.com/dms/image/v2/D5603AQE1lZ2aRsKrhw/profile-displayphoto-shrink_400_400/B56ZRxUoLuHoAg-/0/1737068022127?e=1744848000&v=beta&t=k2T9tdzNyJMmSO8GsT6D2qQmYUQxJRsHbooywDxEDJQ',
+                                content: 'Hello, world',
+                                date: new Date(),
                             },
                         ]}
                     />
diff --git a/src/components/recentPosts.tsx b/src/components/recentPosts.tsx
index e33a60e..2fa554c 100644
--- a/src/components/recentPosts.tsx
+++ b/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>
                 ))}
diff --git a/src/utils.ts b/src/utils.ts
index 0a9eada..1108813 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -7,7 +7,7 @@ export function generateUrlSafeString(length = 16) {
     return Array.from(array, (byte) => chars[byte % chars.length]).join('');
 }
 
-export type PlatformKind = 'x';
+export type PlatformKind = 'x' | 'linkedin';
 
 export interface Platform {
     platform: PlatformKind;