feat: Discover Page

platforms/metagram/src/lib/fragments/UserRequest/UserRequest.stories.ts

@@ -0,0 +1,19 @@
+import type { ComponentProps } from 'svelte';
+import {UserRequest} from '..';
+
+export default {
+	title: 'UI/UserRequest',
+	component: UserRequest,
+	tags: ['autodocs'],
+	render: (args: { Component: UserRequest; props: ComponentProps<typeof UserRequest> }) => ({
+		Component: UserRequest,
+		props: args
+	})
+};
+
+
+export const Primary = {
+	args: {
+
+	}
+};

platforms/metagram/src/lib/fragments/UserRequest/UserRequest.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { Avatar } from "$lib/ui";
+	import Button from "$lib/ui/Button/Button.svelte";
+	import { cn } from "$lib/utils";
+	import type { HTMLAttributes } from "svelte/elements";
+
+    interface IUserRequestprops extends HTMLAttributes<HTMLElement> {
+        userImgSrc: string;
+        userName: string;
+        description: string;
+        handleFollow: () => Promise<void>;
+    }
+
+    let {userImgSrc, userName, description, handleFollow, ...restProps}:IUserRequestprops = $props()
+
+</script>
+
+<article {...restProps} class={cn(["flex justify-between", restProps.class].join(" "))}>
+    <Avatar size="md" src='https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250' />
+    <div class="ms-2 me-4.5">
+        <h3 class="text-black font-semibold">luffythethird</h3>
+        <p class="text-black-600">I’ve always wished life came at me fast. Funny how that wish never came through</p>
+    </div>
+    <Button variant="secondary" size="sm" callback={async() => alert("asdas")}>Follow</Button>
+</article>

platforms/metagram/src/lib/fragments/index.ts

@@ -14,3 +14,4 @@ export { default as Post } from './Post/Post.svelte';
 export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
 export { default as Comment } from './Comment/Comment.svelte';
 export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
+export { default as UserRequest } from "./UserRequest/UserRequest.svelte";

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

@@ -3,6 +3,7 @@
 	import { page } from '$app/state';
 	import { comments } from '$lib/dummyData';
 	import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
+	import UserRequest from '$lib/fragments/UserRequest/UserRequest.svelte';
 	import { Settings } from '$lib/icons';
 	import { showComments } from '$lib/store/store.svelte';
 	import type { CommentType } from '$lib/types';
@@ -73,7 +74,7 @@
 </script>
 
 <main
-	class={`block h-[100dvh] ${route !== '/home' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
+	class={`block h-[100dvh] ${route !== '/home' && route !== "/messages" ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
 >
 	<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
 	<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-8 md:px-8 md:pt-8">
@@ -100,10 +101,11 @@
 		</div>
 		{@render children()}
 	</section>
-	{#if route === '/home'}
+	{#if route === '/home'  || route === "/messages"}
 		<aside
 			class="hide-scrollbar relative hidden h-[100dvh] overflow-y-scroll border border-e-0 border-t-0 border-b-0 border-s-gray-200 px-8 pt-14 md:block"
 		>
+		{#if route === "/home"}
 			{#if showComments.value}
 				<ul class="pb-4">
 					<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
@@ -128,6 +130,16 @@
 					/>
 				</ul>
 			{/if}
+		{:else if route === "/messages"}
+			<ul class="pb-4">
+				<h2 class="text-black-600 mb-6 text-center">Other people you may know</h2>
+				{#each {length: 5} as _}
+				<li class="mb-4">
+					<UserRequest/>
+				</li>
+				{/each}
+			</ul>
+		{/if}
 		</aside>
 	{/if}
 

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

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import {Input} from "$lib/ui";
+
+    let searchValue = $state();
+</script>
+
+<section>
+    <Input type="text" bind:value={searchValue} placeholder="Search user, post and more."/>
+</section>