fix timeline

src/lib/components/MyProfile/Timeline.svelte

@@ -10,26 +10,41 @@
 		} else if (activityType.includes('DELETED') || activityType === 'UNLINK_SPOTIFY') {
 			return 'bg-red-700'; // Removing something
 		}
-		return 'bg-gray-400';
+		return 'bg-gray-700';
+	};
+
+	// Function to format the date
+	const formatDate = (date: Date): string => {
+		const today = new Date();
+		const isToday =
+			date.getDate() === today.getDate() &&
+			date.getMonth() === today.getMonth() &&
+			date.getFullYear() === today.getFullYear();
+
+		if (isToday) {
+			return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+		} else {
+			return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
+		}
 	};
 </script>
 
-<div class="flow-root">
+<div class="flow-root pb-8">
 	<ul role="list" class="-mb-8">
-		{#each recentActivity as activity}
+		{#each recentActivity as activity, i (activity.id)}
 			<li>
 				<div class="relative pb-8">
-					<span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-700" aria-hidden="true"
-					></span>
+					{#if i < recentActivity.length - 1}
+						<!-- Render line only if it's not the last item -->
+						<span class="absolute left-4 top-4 -ml-px h-full w-0.5 bg-gray-700" aria-hidden="true"
+						></span>
+					{/if}
 					<div class="relative flex space-x-3">
 						<div>
 							<span
 								class={`flex h-8 w-8 items-center justify-center rounded-full ${getActivityColor(activity.activityType)}`}
 							>
-								<svelte:component
-									this={findSocialIcon(activity.activityType)}
-									class="h-5 w-5 text-white"
-								/>
+								<svelte:component this={findSocialIcon(activity.activityType)} class="h-5 w-5 " />
 							</span>
 						</div>
 						<div class="flex min-w-0 flex-1 justify-between space-x-4 pt-1.5">
@@ -40,7 +55,7 @@
 							</div>
 							<div class="whitespace-nowrap text-right text-sm">
 								<time datetime={activity.createdAt.toISOString()}>
-									{new Date(activity.createdAt).toLocaleDateString()}
+									{formatDate(new Date(activity.createdAt))}
 								</time>
 							</div>
 						</div>

src/routes/profile/+page.server.ts

@@ -24,7 +24,7 @@ export const load: PageServerLoad = async (event) => {
 	const recentActivity = await prisma.recentActivity.findMany({
 		where: { userId: userId },
 		orderBy: { createdAt: 'desc' },
-		take: 10
+		take: 5
 	});
 
 	return { recentActivity };

src/routes/profile/+page.svelte

@@ -1,13 +1,53 @@
 <script lang="ts">
 	import Timeline from '$lib/components/MyProfile/Timeline.svelte';
 	import type { PageData } from './$types';
+	import * as Card from '$lib/components/ui/card';
+	import UserStats from '$lib/components/MyProfile/UserStats.svelte';
+	import { getGithubData } from '$lib/utils/getGithubData';
+	import type { GithubData } from '$lib/types/GithubData';
+	import { onMount } from 'svelte';
+	import type { PrivateProfileData } from '$lib/types/PrivateProfileData';
 
+	let githubData: GithubData | null = null;
+	let privateProfileData: PrivateProfileData | null = null;
 	export let data: PageData;
+
+	// Fetch GitHub data on component mount
+	onMount(async () => {
+		try {
+			githubData = await getGithubData(data.userData.username);
+
+			// Now that githubData is available, assign to privateProfileData
+			if (githubData) {
+				privateProfileData = {
+					views: data.userData.views,
+					followers: githubData.followers,
+					repoCount: githubData.repoCount,
+					contributionsCount: githubData.contributionsCount
+				};
+			}
+		} catch (error) {
+			console.error('Error fetching GitHub data:', error);
+		}
+	});
 </script>
 
-<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-	<div class="timeline flex justify-center">
-		<Timeline recentActivity={data.recentActivity} />
-	</div>
-	<div class="idk">ddddd</div>
+<UserStats {privateProfileData} />
+
+<div class="mt-10 grid gap-4 md:grid-cols-2 lg:grid-cols-7">
+	<Card.Root class="col-span-4">
+		<Card.Header>
+			<Card.Title>Recent Activity</Card.Title>
+		</Card.Header>
+		<Card.Content>
+			<Timeline recentActivity={data.recentActivity} />
+		</Card.Content>
+	</Card.Root>
+	<Card.Root class="col-span-3">
+		<Card.Header>
+			<Card.Title>We need something here</Card.Title>
+			<Card.Description>You made 265 sales this month.</Card.Description>
+		</Card.Header>
+		<Card.Content>ddddd</Card.Content>
+	</Card.Root>
 </div>