Skip to content

Commit ba96686

Browse files
grv-saini-20grv-saini-20
authored
feat: Discover Page (#180)
1 parent c14bf90 commit ba96686

File tree

5 files changed

+137
-19
lines changed

5 files changed

+137
-19
lines changed

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

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { ComponentProps } from 'svelte';
2+
import { UserRequest } from '..';
3+
4+
export default {
5+
title: 'UI/UserRequest',
6+
component: UserRequest,
7+
tags: ['autodocs'],
8+
render: (args: { Component: UserRequest; props: ComponentProps<typeof UserRequest> }) => ({
9+
Component: UserRequest,
10+
props: args
11+
})
12+
};
13+
14+
export const Primary = {
15+
args: {
16+
userImgSrc: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
17+
userName: 'luffythethird',
18+
description:
19+
'I’ve always wished life came at me fast. Funny how that wish never came through',
20+
handleFollow: () => alert('Adsad')
21+
}
22+
};

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

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script lang="ts">
2+
import { Avatar } from '$lib/ui';
3+
import Button from '$lib/ui/Button/Button.svelte';
4+
import { cn } from '$lib/utils';
5+
import type { HTMLAttributes } from 'svelte/elements';
6+
7+
interface IUserRequestprops extends HTMLAttributes<HTMLElement> {
8+
userImgSrc: string;
9+
userName: string;
10+
description: string;
11+
handleFollow: () => Promise<void>;
12+
}
13+
14+
let { userImgSrc, userName, description, handleFollow, ...restProps }: IUserRequestprops =
15+
$props();
16+
</script>
17+
18+
<article {...restProps} class={cn(['flex justify-between items-center', restProps.class].join(' '))}>
19+
<div class="me-4.5 flex items-start">
20+
<Avatar size="sm" src={userImgSrc} />
21+
<div class="ms-2">
22+
<h3 class="font-semibold text-black">{userName}</h3>
23+
<p class="text-black-600">{description}</p>
24+
</div>
25+
</div>
26+
<Button class="max-w-[100px]" variant="secondary" size="sm" callback={handleFollow}>Follow</Button>
27+
</article>
28+
29+
<!--
30+
@component
31+
@name UserRequest
32+
@description A user request card component displaying avatar, name, description, and a follow button.
33+
@props
34+
- userImgSrc: URL string for the user's avatar image.
35+
- userName: Display name of the user.
36+
- description: A short description or context for the request.
37+
- handleFollow: Async function to execute when the "Follow" button is clicked.
38+
- (spread) HTMLAttributes<HTMLElement>: Additional HTML attributes passed to the root <article> element.
39+
@usage
40+
<script>
41+
import UserRequest from '$lib/fragments/UserRequest.svelte';
42+
43+
async function followUser() {
44+
console.log("User followed!");
45+
}
46+
</script>
47+
48+
<UserRequest
49+
userImgSrc="https://picsum.photos/id/237/200"
50+
userName="John Doe"
51+
description="Wants to connect with you"
52+
handleFollow={followUser}
53+
/>
54+
-->

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,4 @@ export { default as Post } from './Post/Post.svelte';
1414
export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
1515
export { default as Comment } from './Comment/Comment.svelte';
1616
export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
17+
export { default as UserRequest } from './UserRequest/UserRequest.svelte';

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

Lines changed: 36 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
import { page } from '$app/state';
44
import { comments } from '$lib/dummyData';
55
import { BottomNav, Header, Comment, MessageInput, SideBar } from '$lib/fragments';
6+
import UserRequest from '$lib/fragments/UserRequest/UserRequest.svelte';
67
import { Settings } from '$lib/icons';
78
import { showComments } from '$lib/store/store.svelte';
89
import type { CommentType } from '$lib/types';
@@ -73,7 +74,7 @@
7374
</script>
7475

7576
<main
76-
class={`block h-[100dvh] ${route !== '/home' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
77+
class={`block h-[100dvh] ${route !== '/home' && route !== '/messages' ? 'grid-cols-[20vw_auto]' : 'grid-cols-[20vw_auto_30vw]'} md:grid`}
7778
>
7879
<SideBar profileSrc="https://picsum.photos/200" handlePost={async () => alert('adas')} />
7980
<section class="hide-scrollbar h-[100dvh] overflow-y-auto px-4 pb-8 md:px-8 md:pt-8">
@@ -100,32 +101,48 @@
100101
</div>
101102
{@render children()}
102103
</section>
103-
{#if route === '/home'}
104+
{#if route === '/home' || route === '/messages'}
104105
<aside
105106
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"
106107
>
107-
{#if showComments.value}
108+
{#if route === '/home'}
109+
{#if showComments.value}
110+
<ul class="pb-4">
111+
<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
112+
{#each _comments as comment}
113+
<li class="mb-4">
114+
<Comment
115+
{comment}
116+
handleReply={() => {
117+
activeReplyToId = comment.commentId;
118+
commentInput?.focus();
119+
}}
120+
/>
121+
</li>
122+
{/each}
123+
<MessageInput
124+
class="sticky start-0 bottom-4 mt-4 w-full px-2"
125+
variant="comment"
126+
src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
127+
bind:value={commentValue}
128+
{handleSend}
129+
bind:input={commentInput}
130+
/>
131+
</ul>
132+
{/if}
133+
{:else if route === '/messages'}
108134
<ul class="pb-4">
109-
<h3 class="text-black-600 mb-6 text-center">{comments.length} Comments</h3>
110-
{#each _comments as comment}
135+
<h2 class="text-black-600 mb-6 text-center">Other people you may know</h2>
136+
{#each { length: 5 } as _}
111137
<li class="mb-4">
112-
<Comment
113-
{comment}
114-
handleReply={() => {
115-
activeReplyToId = comment.commentId;
116-
commentInput?.focus();
117-
}}
138+
<UserRequest
139+
userImgSrc="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
140+
userName="luffythethird"
141+
description="I’ve always wished life came at me fast. Funny how that wish never came through"
142+
handleFollow={async () => alert('Adsad')}
118143
/>
119144
</li>
120145
{/each}
121-
<MessageInput
122-
class="sticky start-0 bottom-4 mt-4 w-full px-2"
123-
variant="comment"
124-
src="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
125-
bind:value={commentValue}
126-
{handleSend}
127-
bind:input={commentInput}
128-
/>
129146
</ul>
130147
{/if}
131148
</aside>

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<script lang="ts">
2+
import { UserRequest } from '$lib/fragments';
3+
import { Input } from '$lib/ui';
4+
5+
let searchValue = $state();
6+
</script>
7+
8+
<section>
9+
<Input type="text" bind:value={searchValue} placeholder="Search user, post and more." />
10+
{#if searchValue}
11+
<ul class="pb-4 mt-6">
12+
{#each { length: 5 } as _}
13+
<li class="mb-4">
14+
<UserRequest
15+
userImgSrc="https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250"
16+
userName="luffythethird"
17+
description="I’ve always wished life came at me fast. Funny how that wish never came through"
18+
handleFollow={async () => alert('Adsad')}
19+
/>
20+
</li>
21+
{/each}
22+
</ul>
23+
{/if}
24+
</section>

0 commit comments

Comments
 (0)