profile page

platforms/metagram/src/lib/dummyData.ts

@@ -2,7 +2,7 @@ export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
 	id: i + 1,
 	avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
 	username: `user${i + 1}`,
-	imgUri: 'https://picsum.photos/800',
+	imgUri: `https://picsum.photos/800?random=${i + 1}`,
 	postAlt: 'Sample',
 	text: `This is post number ${i + 1}. Loving how these shots came out! 📸`,
 	time: `${i + 1} hours ago`,

platforms/metagram/src/routes/(protected)/+layout.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
 	import { BottomNav, Header } from '$lib/fragments';
 	import SideBar from '$lib/fragments/SideBar/SideBar.svelte';
-	import { Settings } from '$lib/icons';
-	let { children } = $props();
 
+	let { children } = $props();
 	let route = $derived(page.url.pathname);
 	let heading = $state('');
 
@@ -30,21 +28,10 @@
 
 <main class="block h-[100dvh] grid-cols-[20vw_auto_30vw] md:grid">
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
-	<section class="mx-4 md:mx-8 md:pt-8">
-		<div class="flex items-center justify-between">
+	<section class=" {route === '/profile' ? '' : 'mx-4 md:mx-8 md:pt-8'}">
+		{#if route !== '/profile'}
 			<Header variant="primary" {heading} />
-			{#if route === '/profile'}
-				<div class="mb-6 flex md:hidden">
-					<button
-						type="button"
-						class="flex items-center gap-2"
-						onclick={() => goto(`/settings`)}
-					>
-						<Settings size="24px" color="var(--color-brand-burnt-orange)" />
-					</button>
-				</div>
-			{/if}
-		</div>
+		{/if}
 		{@render children()}
 	</section>
 	<BottomNav profileSrc="https://picsum.photos/200" />

platforms/metagram/src/routes/(protected)/profile/+page.svelte

@@ -1,2 +1,53 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
+	import { Button } from '$lib/ui';
+
+	let userImage: string = $state('https://picsum.photos/200/300');
+	let username: string = $state('_.ananyayaya_.');
+	let user: string = $state('Ananya Rana');
+	let followers: number = $state(24);
+	let following: number = $state(56);
+	let totalPosts: number = $state(10);
+	let userBio: string = $state(
+		'Friendly nerd who likes to not meet people as much as possible. Leave the earth for me yall.'
+	);
+	let posts: string[] = $state([
+		'https://picsum.photos/id/1011/200/200',
+		'https://picsum.photos/id/1012/200/200',
+		'https://picsum.photos/id/1013/200/200',
+		'https://picsum.photos/id/1014/200/200',
+		'https://picsum.photos/id/1015/200/200',
+		'https://picsum.photos/id/1016/200/200'
+	]);
 </script>
+
+<div class="bg-grey flex h-full w-full flex-col items-center gap-4 pt-[10%]">
+	<div class="flex flex-col items-center gap-4 p-4">
+		<img class="size-28 rounded-full" src={userImage} alt="" />
+		<div class="flex flex-col items-center gap-2">
+			<p class="font-semibold">{username}</p>
+			<p class="text-black-600">{user}</p>
+		</div>
+		<div class="text-black-600 flex gap-4">
+			<p><span class="font-semibold text-black">{followers}</span> followers</p>
+			<p><span class="font-semibold text-black">{following}</span> following</p>
+			<p><span class="font-semibold text-black">{totalPosts}</span> posts</p>
+		</div>
+		<div class="text-black-600 px-12 text-center text-sm">
+			{userBio}
+		</div>
+		<div class="flex w-full gap-3">
+			<div class="w-full">
+				<Button size="sm" class="w-full">Edit Profile</Button>
+			</div>
+			<div class="w-full">
+				<Button size="sm" callback={() => goto(`/settings`)}>Settings</Button>
+			</div>
+		</div>
+	</div>
+	<div class="grid grid-cols-3 gap-[2px]">
+		{#each posts as post}
+			<img class="aspect-square rounded-md object-cover" src={post} alt="user post" />
+		{/each}
+	</div>
+</div>

platforms/metagram/src/routes/(protected)/settings/+page.svelte

@@ -42,10 +42,6 @@
 			{/snippet}
 		</SettingsNavigationButton>
 	</div>
-</div>
-<hr class="text-grey" />
-<div class="flex flex-col gap-3">
-	<h3 class="text-brand-burnt-orange text-base font-semibold">System</h3>
 	<div class="{route === `/settings/data-and-storage` ? 'bg-grey' : ''} rounded-xl p-2">
 		<SettingsNavigationButton onclick={() => goto(`/settings/data-and-storage`)}>
 			{#snippet leadingIcon()}
@@ -60,6 +56,7 @@
 			{/snippet}
 		</SettingsNavigationButton>
 	</div>
+	<hr class="text-grey" />
 	<div class="{route === `/settings/logout` ? 'bg-grey' : ''} rounded-xl p-2">
 		<SettingsNavigationButton onclick={() => goto(`/settings/logout`)}>
 			{#snippet leadingIcon()}