refactor/Post

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`,

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',
+		imgUris: [
+			'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',

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<HTMLElement> {
 		avatar: string;
 		username: string;
-		imgUri: string;
+		imgUris: string[];
 		postAlt?: string;
 		text: string;
 		count: {
@@ -31,14 +33,35 @@
 	const {
 		avatar,
 		username,
-		imgUri,
+		imgUris,
 		text,
 		postAlt,
 		count,
 		callback,
 		time,
 		...restProps
 	}: 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;
+	}
 </script>
 
 <article {...restProps} class={cn(['flex w-full flex-col gap-4', restProps.class])}>
@@ -52,12 +75,53 @@
 			<HugeiconsIcon icon={MoreVerticalIcon} size={24} color="var(--color-black-500)" />
 		</button>
 	</div>
-	<div class="overflow-hidden rounded-4xl">
-		<img
-			src={imgUri}
-			alt={postAlt ?? text}
-			class="aspect-[4/5] h-full w-full object-cover md:aspect-[16/9]"
-		/>
+	<div class="relative">
+		{#if imgUris.length > 1}
+			<button
+				onclick={scrollLeft}
+				class="absolute start-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white p-2 shadow hover:bg-gray-200 md:inline-block"
+			>
+				<HugeiconsIcon icon={ArrowLeftIcon} size={20} color="black" />
+			</button>
+		{/if}
+		<div
+			bind:this={galleryRef}
+			onscroll={handleScroll}
+			class="hide-scrollbar flex aspect-[4/5] snap-x snap-mandatory flex-nowrap gap-2 overflow-hidden overflow-x-scroll rounded-4xl md:aspect-[16/9]"
+		>
+			{#each imgUris as img}
+				<div class="aspect-[4/5] h-full w-full snap-center md:aspect-[16/9]">
+					<img
+						src={img}
+						alt={postAlt ?? text}
+						class=" h-full w-full rounded-4xl object-cover"
+					/>
+				</div>
+			{/each}
+		</div>
+		{#if imgUris.length > 1}
+			<div
+				class="absolute start-[50%] bottom-4 mt-2 flex translate-x-[-50%] items-center justify-center gap-1"
+			>
+				{#if imgUris.length > 1}
+					<div class="mt-2 flex items-center justify-center gap-1">
+						{#each imgUris as _, i}
+							<div
+								class={`h-1.5 w-1.5 rounded-full ${currentIndex === i ? 'bg-white' : 'bg-black-600'}`}
+							></div>
+						{/each}
+					</div>
+				{/if}
+			</div>
+		{/if}
+		{#if imgUris.length > 1}
+			<button
+				onclick={scrollRight}
+				class="absolute end-2 top-1/2 z-10 hidden -translate-y-1/2 rounded-full bg-white p-2 shadow hover:bg-gray-200 md:inline-block"
+			>
+				<HugeiconsIcon icon={ArrowRightIcon} size={20} color="black" />
+			</button>
+		{/if}
 	</div>
 	<p class="text-black/80">{text}</p>
 	<p class="text-black/60">{time}</p>

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;

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

@@ -89,7 +89,7 @@
 			<Post
 				avatar={post.avatar}
 				username={post.username}
-				imgUri={post.imgUri}
+				imgUris={post.imgUri}
 				postAlt={post.postAlt}
 				text={post.text}
 				time={post.time}