selimaj-dev/klayrion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard completed

Browse Source
This commit is contained in:
selimaj-dev
2025-02-15 21:38:09 +01:00
parent eac41ab14b
commit 1b04a65333
3 changed files with 47 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/dashboard/page.tsx
+25 -16
View File
@@ -1,16 +1,14 @@
import AccountStatus from '@/components/accountStatus';
import Engagement from '@/components/engagement'; import Engagement from '@/components/engagement';
import Ideas from '@/components/ideas'; import Ideas from '@/components/ideas';
import RecentPosts from '@/components/recentPosts'; import RecentPosts from '@/components/recentPosts';
import { Calendar } from '@/components/ui/calendar'; import { Calendar } from '@/components/ui/calendar';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Checkbox } from '@/components/ui/checkbox';
import { import {
SidebarProvider, SidebarProvider,
Sidebar, Sidebar,
SidebarContent, SidebarContent,
} from '@/components/ui/sidebar'; } from '@/components/ui/sidebar';
import { DayPicker } from 'react-day-picker';
export default function Dashboard() { export default function Dashboard() {
return ( return (
@@ -60,16 +58,24 @@ export default function Dashboard() {
}, },
]} ]}
/> />
<Ideas <AccountStatus
ideas={[ accounts={[
{ {
idea: 'The recent Linus tech tips drama', name: 'Klesti Selimaj',
checked: true, ok: true,
platform: 'linkedin',
}, },
{ idea: 'Code reviews', checked: false },
{ {
idea: 'How to build charts in react', name: 'Klesti Selimaj',
checked: false, ok: true,
platform: 'x',
},
{
name: 'Leo Codes',
ok: false,
platform: 'x',
}, },
]} ]}
/> />
@@ -78,17 +84,20 @@ export default function Dashboard() {
posts={[ posts={[
{ {
platform: 'x', platform: 'x',
name: 'Leo Codes', name: 'Klesti Selimaj',
username: 'leo.codes', profileUrl:
'https://media.licdn.com/dms/image/v2/D5603AQE1lZ2aRsKrhw/profile-displayphoto-shrink_400_400/B56ZRxUoLuHoAg-/0/1737068022127?e=1744848000&v=beta&t=k2T9tdzNyJMmSO8GsT6D2qQmYUQxJRsHbooywDxEDJQ',
content: content:
"The linus tech tips drama is complex, don't know who to blame, they should try to figure this out privately", "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', platform: 'x',
name: 'Leo Codes', name: 'Klesti Selimaj',
username: 'leo.codes', profileUrl:
content: 'https://media.licdn.com/dms/image/v2/D5603AQE1lZ2aRsKrhw/profile-displayphoto-shrink_400_400/B56ZRxUoLuHoAg-/0/1737068022127?e=1744848000&v=beta&t=k2T9tdzNyJMmSO8GsT6D2qQmYUQxJRsHbooywDxEDJQ',
"Hello, world", content: 'Hello, world',
date: new Date(),
}, },
]} ]}
/> />
src/components/recentPosts.tsx
+21 -6
View File
@@ -1,13 +1,16 @@
import { PlatformKind } from '@/utils'; import { PlatformKind } from '@/utils';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card'; import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { PlatformIcon } from './icons';
import { format } from 'date-fns';
export default function RecentPosts({ export default function RecentPosts({
posts, posts,
}: { }: {
posts: { posts: {
platform: PlatformKind; platform: PlatformKind;
profileUrl: string;
name: string; name: string;
username: string; date: Date;
content: string; content: string;
}[]; }[];
}) { }) {
@@ -17,24 +20,36 @@ export default function RecentPosts({
<CardTitle>Recent posts</CardTitle> <CardTitle>Recent posts</CardTitle>
</CardHeader> </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) => ( {posts.map((post, i) => (
// <div className="border flex flex-col h-full p-4 rounded-xl" key={i}>
// {post.content}
// </div>
<div <div
key={i} 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="relative">
<div className="flex items-center w-full"> <div className="flex items-center w-full">
<img <img
src="/pfp" src={post.profileUrl}
alt="PFP" alt="PFP"
className="size-12 rounded-full" className="size-12 rounded-full"
/> />
<p className="ml-4">{post.name}</p> <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> </div>
<div className="w-full mt-2"> <div className="w-full mt-2 flex-1">
<p>{post.content}</p> <p className="line-clamp-2">{post.content}</p>
</div> </div>
</div> </div>
))} ))}
src/utils.ts
+1 -1
View File
@@ -7,7 +7,7 @@ export function generateUrlSafeString(length = 16) {
return Array.from(array, (byte) => chars[byte % chars.length]).join(''); return Array.from(array, (byte) => chars[byte % chars.length]).join('');
} }
export type PlatformKind = 'x'; export type PlatformKind = 'x' | 'linkedin';
export interface Platform { export interface Platform {
platform: PlatformKind; platform: PlatformKind;