feat: added uploaded post view component.

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

@@ -0,0 +1,51 @@
+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,
+    }),
+};
+
+let 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,
+        callback: (i: number) => {
+            images = images.filter((_, index) => index !== i);
+        },
+    },
+};

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

@@ -0,0 +1,82 @@
+<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<HTMLElement> {
+		images: IImage[];
+		width?: string;
+		height?: string;
+		callback: (i: number) => void;
+	}
+
+	let {
+		images,
+		width = 'w-full',
+		height = 'h-full',
+		callback,
+		...restProps
+	}: IUploadedPostViewProps = $props();
+</script>
+
+<article
+	{...restProps}
+	class={cn(
+		['max-w-screen flex flex-row items-center gap-4 scroll-auto', restProps.class].join(' ')
+	)}
+>
+	{#each images as image, i}
+		<div class={cn(['group relative shrink-0'])}>
+			<Cross
+				class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
+				onclick={() => callback(i)}
+			/>
+			<img
+				src={image.url}
+				alt={image.alt}
+				class={cn(['rounded-lg outline-[#DA4A11] group-hover:outline-2', width, height])}
+			/>
+		</div>
+	{/each}
+</article>
+
+<!--
+    @component
+    export default UploadedPostView
+    @description
+    This component is a view for displaying uploaded images in a post. It allows users to see the images they have uploaded and provides a way to remove individual images.
+
+    @props
+    - images: An array of image objects, each containing a `url` and `alt` text.
+	- width: The width of the image container. Default is `w-full`.
+	- height: The height of the image container. Default is `h-full`.
+	- callback: A function that is called when the cross on the image is clicked, passing the index of the clicked image.
+    - ...restProps: Any other props that can be passed to a image container element.
+
+    @usage
+    ```html
+    <script lang="ts">
+		import { UploadedPostView } from '$lib/fragments';
+    </script>
+
+	<UploadedPostView
+		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",
+        }]}
+		callback={(i: number) => {
+            images = images.filter((_, index) => index !== i);
+        }}
+    />
+    ```
+-->

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

@@ -1,17 +1,18 @@
-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 RightAside } from './RightAside/RightAside.svelte';
-export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
-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';
+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 RightAside } from "./RightAside/RightAside.svelte";
+export { default as SettingsToggleButton } from "./SettingsToggleButton/SettingsToggleButton.svelte";
+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";
+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 CommentIcon } from './CommentIcon.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 CommentIcon } from "./CommentIcon.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";