From 9b8ca70155756bd0ee71193bdddb3608eef32cc2 Mon Sep 17 00:00:00 2001 From: gourav Date: Tue, 3 Jun 2025 11:37:34 +0530 Subject: [PATCH 1/6] refactor/Post --- platforms/metagram/src/lib/dummyData.ts | 7 ++- .../src/lib/fragments/Post/Post.stories.ts | 5 +- .../src/lib/fragments/Post/Post.svelte | 51 ++++++++++++++++--- platforms/metagram/src/lib/types.ts | 2 +- 4 files changed, 55 insertions(+), 10 deletions(-) diff --git a/platforms/metagram/src/lib/dummyData.ts b/platforms/metagram/src/lib/dummyData.ts index 653f42ea..c05a2f02 100644 --- a/platforms/metagram/src/lib/dummyData.ts +++ b/platforms/metagram/src/lib/dummyData.ts @@ -4,7 +4,12 @@ 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', + 'https://picsum.photos/200', + 'https://picsum.photos/800', + 'https://picsum.photos/200' + ], postAlt: 'Sample', text: `This is post number ${i + 1}. Loving how these shots came out! 📸`, time: `${i + 1} hours ago`, diff --git a/platforms/metagram/src/lib/fragments/Post/Post.stories.ts b/platforms/metagram/src/lib/fragments/Post/Post.stories.ts index d112e836..6dd01293 100644 --- a/platforms/metagram/src/lib/fragments/Post/Post.stories.ts +++ b/platforms/metagram/src/lib/fragments/Post/Post.stories.ts @@ -15,7 +15,10 @@ export const Primary = { args: { avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250', username: 'blurryface', - imgUri: 'https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg', + imgUri: [ + 'https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg', + 'https://picsum.photos/200' + ], postAlt: 'Sample', text: 'Took some pictures today! Really love how this one in particular turned out! ', time: '2 hours ago', diff --git a/platforms/metagram/src/lib/fragments/Post/Post.svelte b/platforms/metagram/src/lib/fragments/Post/Post.svelte index 72e9c81a..8c6eec1b 100644 --- a/platforms/metagram/src/lib/fragments/Post/Post.svelte +++ b/platforms/metagram/src/lib/fragments/Post/Post.svelte @@ -2,6 +2,8 @@ import { Avatar } from '$lib/ui'; import { cn } from '$lib/utils'; import { + ArrowLeftIcon, + ArrowRightIcon, Message02Icon, MoreVerticalIcon, RecordIcon, @@ -13,7 +15,7 @@ interface IPostProps extends HTMLAttributes { avatar: string; username: string; - imgUri: string; + imgUri: string[]; postAlt?: string; text: string; count: { @@ -39,6 +41,16 @@ time, ...restProps }: IPostProps = $props(); + + let galleryRef: HTMLDivElement; + + function scrollLeft() { + galleryRef.scrollBy({ left: -galleryRef.clientWidth, behavior: 'smooth' }); + } + + function scrollRight() { + galleryRef.scrollBy({ left: galleryRef.clientWidth, behavior: 'smooth' }); + }
@@ -52,12 +64,37 @@ -
- {postAlt +
+ {#if imgUri.length !== 1} + + {/if} +
+ {#each imgUri as img} +
+ {postAlt +
+ {/each} +
+ {#if imgUri.length !== 1} + + {/if}

{text}

{time}

diff --git a/platforms/metagram/src/lib/types.ts b/platforms/metagram/src/lib/types.ts index 1cd87950..b289f7d2 100644 --- a/platforms/metagram/src/lib/types.ts +++ b/platforms/metagram/src/lib/types.ts @@ -21,7 +21,7 @@ export type PostData = { id: number; avatar: string; username: string; - imgUri: string; + imgUri: string[]; postAlt: string; text: string; time: string; From 3b485ffdf6e90717929af357324cc71dca5ed469 Mon Sep 17 00:00:00 2001 From: gourav Date: Tue, 3 Jun 2025 11:42:43 +0530 Subject: [PATCH 2/6] fix: format and lint --- .../src/lib/fragments/Post/Post.svelte | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/platforms/metagram/src/lib/fragments/Post/Post.svelte b/platforms/metagram/src/lib/fragments/Post/Post.svelte index 8c6eec1b..28dd9f78 100644 --- a/platforms/metagram/src/lib/fragments/Post/Post.svelte +++ b/platforms/metagram/src/lib/fragments/Post/Post.svelte @@ -66,12 +66,12 @@
{#if imgUri.length !== 1} - + {/if}
{#if imgUri.length !== 1} - + {/if}

{text}

From 207f9945baa726451a346ea56520f905d6f801b4 Mon Sep 17 00:00:00 2001 From: gourav Date: Tue, 3 Jun 2025 12:06:34 +0530 Subject: [PATCH 3/6] fix: added dots for gallery --- .../src/lib/fragments/Post/Post.svelte | 31 +++++++++++++++++-- 1 file changed, 29 insertions(+), 2 deletions(-) diff --git a/platforms/metagram/src/lib/fragments/Post/Post.svelte b/platforms/metagram/src/lib/fragments/Post/Post.svelte index 28dd9f78..e6929c4d 100644 --- a/platforms/metagram/src/lib/fragments/Post/Post.svelte +++ b/platforms/metagram/src/lib/fragments/Post/Post.svelte @@ -43,14 +43,25 @@ }: IPostProps = $props(); let galleryRef: HTMLDivElement; + let currentIndex = $state(0); function scrollLeft() { + if (!galleryRef) return; galleryRef.scrollBy({ left: -galleryRef.clientWidth, behavior: 'smooth' }); } function scrollRight() { + if (!galleryRef) return; galleryRef.scrollBy({ left: galleryRef.clientWidth, behavior: 'smooth' }); } + + function handleScroll() { + if (!galleryRef) return; + const scrollLeft = galleryRef.scrollLeft; + const galleryWidth = galleryRef.clientWidth; + const newIndex = Math.round(scrollLeft / galleryWidth); + currentIndex = newIndex; + }
@@ -65,7 +76,7 @@
- {#if imgUri.length !== 1} + {#if imgUri.length > 1}
{/each} - {#if imgUri.length !== 1} + {#if imgUri.length > 1} +
+ {#if imgUri.length > 1} +
+ {#each imgUri as _, i} +
+ {/each} +
+ {/if} +
+ {/if} + {#if imgUri.length > 1}
- {#if imgUri.length > 1} + {#if imgUris.length > 1}