feat: added uploaded post view component.

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

@@ -0,0 +1,48 @@
+import type { ComponentProps } from "svelte";
+import UploadedPostView from "./UploadedPostView.svelte";
+
+export default {
+    title: "UI/UploadedPostView",
+    component: UploadedPostView,
+    tags: ["autodocs"],
+    render: (args: {
+        Component: UploadedPostView;
+        props: ComponentProps<typeof UploadedPostView>;
+    }) => ({
+        Component: UploadedPostView,
+        props: args,
+    }),
+};
+
+const IMAGES = [
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+    {
+        url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
+        alt: "Sample Image 1",
+    },
+];
+
+export const Primary = {
+    args: {
+        images: IMAGES,
+    },
+};

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import { Cross } from '$lib/icons';
+	import { cn } from '$lib/utils';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	interface IImage {
+		url: string;
+		alt: string;
+	}
+
+	interface IUploadedPostViewProps extends HTMLAttributes<HTMLImageElement> {
+		images: IImage[];
+		width?: string;
+		height?: string;
+	}
+
+	let {
+		images,
+		width = 'w-full',
+		height = 'h-full',
+		...restProps
+	}: IUploadedPostViewProps = $props();
+
+	const crossHandler = (i: number) => {
+		images = images.filter((_, index) => index !== i);
+	};
+</script>
+
+<article class="max-w-screen flex flex-row items-center gap-4 scroll-auto">
+	{#each images as image, i}
+		<div class={cn(['relative shrink-0'])}>
+			<Cross
+				class="absolute right-0 top-0 -translate-y-1/2 translate-x-1/2 cursor-pointer"
+				onclick={() => crossHandler(i)}
+			/>
+			<img
+				{...restProps}
+				src={image.url}
+				alt={image.alt}
+				class={cn(['rounded-lg', width, height, restProps.class])}
+			/>
+		</div>
+	{/each}
+</article>

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

@@ -1,11 +1,12 @@
-export { default as Header } from './Header/Header.svelte';
-export { default as BottomNav } from './BottomNav/BottomNav.svelte';
-export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
-export { default as MessageInput } from './MessageInput/MessageInput.svelte';
-export { default as InputFile } from './InputFile/InputFile.svelte';
-export { default as Drawer } from './Drawer/Drawer.svelte';
-export { default as Message } from './Message/Message.svelte';
-export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
-export { default as Modal } from './Modal/Modal.svelte';
-export { default as SideBar } from './SideBar/SideBar.svelte';
-export { default as Post } from './Post/Post.svelte';
+export { default as Header } from "./Header/Header.svelte";
+export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
+export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte";
+export { default as MessageInput } from "./MessageInput/MessageInput.svelte";
+export { default as InputFile } from "./InputFile/InputFile.svelte";
+export { default as Drawer } from "./Drawer/Drawer.svelte";
+export { default as Message } from "./Message/Message.svelte";
+export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte";
+export { default as Modal } from "./Modal/Modal.svelte";
+export { default as SideBar } from "./SideBar/SideBar.svelte";
+export { default as Post } from "./Post/Post.svelte";
+export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";

platforms/metagram/src/lib/icons/Cross.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { ISvgProps } from './../types';
+
+	let { size = '20px', color = '#DA4A11', ...restProps }: ISvgProps = $props();
+</script>
+
+<svg
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	{...restProps}
+>
+	<rect width="24" height="24" rx="12" fill={color} />
+	<path
+		d="M16.0837 7.91663L7.91699 16.0833M7.91699 7.91663L16.0837 16.0833"
+		stroke="white"
+		stroke-width="1.75"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	/>
+</svg>

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

@@ -1,11 +1,12 @@
-export { default as Icons } from './Icons.svelte';
-export { default as Like } from './Like.svelte';
-export { default as Refresh } from './Refresh.svelte';
-export { default as Comment } from './Comment.svelte';
-export { default as VerticalDots } from './VerticalDots.svelte';
-export { default as Home } from './Home.svelte';
-export { default as Flash } from './Flash.svelte';
-export { default as CommentsTwo } from './CommentsTwo.svelte';
-export { default as Search } from './Search.svelte';
-export { default as Camera } from './Camera.svelte';
-export { default as Settings } from './Settings.svelte';
+export { default as Icons } from "./Icons.svelte";
+export { default as Like } from "./Like.svelte";
+export { default as Refresh } from "./Refresh.svelte";
+export { default as Comment } from "./Comment.svelte";
+export { default as VerticalDots } from "./VerticalDots.svelte";
+export { default as Home } from "./Home.svelte";
+export { default as Flash } from "./Flash.svelte";
+export { default as CommentsTwo } from "./CommentsTwo.svelte";
+export { default as Search } from "./Search.svelte";
+export { default as Camera } from "./Camera.svelte";
+export { default as Settings } from "./Settings.svelte";
+export { default as Cross } from "./Cross.svelte";