feat: Discover Page

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

@@ -0,0 +1,22 @@
+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: {
+		userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
+		userName: 'luffythethird',
+		description:
+			'I’ve always wished life came at me fast. Funny how that wish never came through',
+		handleFollow: () => alert('Adsad')
+	}
+};

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={userImgSrc} />
+	<div class="ms-2 me-4.5">
+		<h3 class="font-semibold text-black">{userName}</h3>
+		<p class="text-black-600">{description}</p>
+	</div>
+	<Button variant="secondary" size="sm" callback={handleFollow}>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,32 +101,48 @@
 		</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 showComments.value}
+			{#if route === '/home'}
+				{#if showComments.value}
+					<ul class="pb-4">
+						<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
+						{#each _comments as comment}
+							<li class="mb-4">
+								<Comment
+									{comment}
+									handleReply={() => {
+										activeReplyToId = comment.commentId;
+										commentInput?.focus();
+									}}
+								/>
+							</li>
+						{/each}
+						<MessageInput
+							class="sticky start-0 bottom-4 mt-4 w-full px-2"
+							variant="comment"
+							src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+							bind:value={commentValue}
+							{handleSend}
+							bind:input={commentInput}
+						/>
+					</ul>
+				{/if}
+			{:else if route === '/messages'}
 				<ul class="pb-4">
-					<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
-					{#each _comments as comment}
+					<h2 class="text-black-600 mb-6 text-center">Other people you may know</h2>
+					{#each { length: 5 } as _}
 						<li class="mb-4">
-							<Comment
-								{comment}
-								handleReply={() => {
-									activeReplyToId = comment.commentId;
-									commentInput?.focus();
-								}}
+							<UserRequest
+								userImgSrc="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
+								userName="luffythethird"
+								description="I’ve always wished life came at me fast. Funny how that wish never came through"
+								handleFollow={async () => alert('Adsad')}
 							/>
 						</li>
 					{/each}
-					<MessageInput
-						class="sticky start-0 bottom-4 mt-4 w-full px-2"
-						variant="comment"
-						src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
-						bind:value={commentValue}
-						{handleSend}
-						bind:input={commentInput}
-					/>
 				</ul>
 			{/if}
 		</aside>

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>