Skip to content

Commit 26dc10f

Browse files
Sahil2004Sahil2004
authored
feat: added uploaded post view component. (#182)
* feat: added uploaded post view component. * fix: fixed the outline and color. * fix: moved function to external definition. * fix: fixed the restProps.
1 parent 7ffc9ff commit 26dc10f

File tree

5 files changed

+186
-28
lines changed

5 files changed

+186
-28
lines changed

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

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import type { ComponentProps } from "svelte";
2+
import UploadedPostView from "./UploadedPostView.svelte";
3+
4+
export default {
5+
title: "UI/UploadedPostView",
6+
component: UploadedPostView,
7+
tags: ["autodocs"],
8+
render: (args: {
9+
Component: UploadedPostView;
10+
props: ComponentProps<typeof UploadedPostView>;
11+
}) => ({
12+
Component: UploadedPostView,
13+
props: args,
14+
}),
15+
};
16+
17+
let images = [
18+
{
19+
url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
20+
alt: "Sample Image 1",
21+
},
22+
{
23+
url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
24+
alt: "Sample Image 1",
25+
},
26+
{
27+
url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
28+
alt: "Sample Image 1",
29+
},
30+
{
31+
url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
32+
alt: "Sample Image 1",
33+
},
34+
{
35+
url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
36+
alt: "Sample Image 1",
37+
},
38+
{
39+
url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
40+
alt: "Sample Image 1",
41+
},
42+
];
43+
44+
export const Primary = {
45+
args: {
46+
images: images,
47+
callback: (i: number) => {
48+
images = images.filter((_, index) => index !== i);
49+
},
50+
},
51+
};

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<script lang="ts">
2+
import { Cross } from '$lib/icons';
3+
import { cn } from '$lib/utils';
4+
import type { HTMLAttributes } from 'svelte/elements';
5+
6+
interface IImage {
7+
url: string;
8+
alt: string;
9+
}
10+
11+
interface IUploadedPostViewProps extends HTMLAttributes<HTMLElement> {
12+
images: IImage[];
13+
width?: string;
14+
height?: string;
15+
callback: (i: number) => void;
16+
}
17+
18+
let {
19+
images,
20+
width = 'w-full',
21+
height = 'h-full',
22+
callback,
23+
...restProps
24+
}: IUploadedPostViewProps = $props();
25+
</script>
26+
27+
<article
28+
{...restProps}
29+
class={cn(
30+
['max-w-screen flex flex-row items-center gap-4 scroll-auto', restProps.class].join(' ')
31+
)}
32+
>
33+
{#each images as image, i}
34+
<div class={cn(['group relative shrink-0'])}>
35+
<Cross
36+
class="absolute right-0 top-0 hidden -translate-y-1/2 translate-x-1/2 cursor-pointer group-hover:block"
37+
onclick={() => callback(i)}
38+
/>
39+
<img
40+
src={image.url}
41+
alt={image.alt}
42+
class={cn(['rounded-lg outline-[#DA4A11] group-hover:outline-2', width, height])}
43+
/>
44+
</div>
45+
{/each}
46+
</article>
47+
48+
<!--
49+
@component
50+
export default UploadedPostView
51+
@description
52+
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.
53+
54+
@props
55+
- images: An array of image objects, each containing a `url` and `alt` text.
56+
- width: The width of the image container. Default is `w-full`.
57+
- height: The height of the image container. Default is `h-full`.
58+
- callback: A function that is called when the cross on the image is clicked, passing the index of the clicked image.
59+
- ...restProps: Any other props that can be passed to a image container element.
60+
61+
@usage
62+
```html
63+
<script lang="ts">
64+
import { UploadedPostView } from '$lib/fragments';
65+
</script>
66+
67+
<UploadedPostView
68+
images={[
69+
{
70+
url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
71+
alt: "Sample Image 1",
72+
},
73+
{
74+
url: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
75+
alt: "Sample Image 1",
76+
}]}
77+
callback={(i: number) => {
78+
images = images.filter((_, index) => index !== i);
79+
}}
80+
/>
81+
```
82+
-->

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

Lines changed: 18 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
1-
export { default as Header } from './Header/Header.svelte';
2-
export { default as BottomNav } from './BottomNav/BottomNav.svelte';
3-
export { default as SettingsNavigationButton } from './SettingsNavigationButton/SettingsNavigationButton.svelte';
4-
export { default as MessageInput } from './MessageInput/MessageInput.svelte';
5-
export { default as InputFile } from './InputFile/InputFile.svelte';
6-
export { default as Drawer } from './Drawer/Drawer.svelte';
7-
export { default as Message } from './Message/Message.svelte';
8-
export { default as ActionMenu } from './ActionMenu/ActionMenu.svelte';
9-
export { default as Modal } from './Modal/Modal.svelte';
10-
export { default as SideBar } from './SideBar/SideBar.svelte';
11-
export { default as RightAside } from './RightAside/RightAside.svelte';
12-
export { default as SettingsToggleButton } from './SettingsToggleButton/SettingsToggleButton.svelte';
13-
export { default as Post } from './Post/Post.svelte';
14-
export { default as ChatMessage } from './ChatMessage/ChatMessage.svelte';
15-
export { default as Comment } from './Comment/Comment.svelte';
16-
export { default as SettingsDeleteButton } from './SettingsDeleteButton/SettingsDeleteButton.svelte';
17-
export { default as UserRequest } from './UserRequest/UserRequest.svelte';
1+
export { default as Header } from "./Header/Header.svelte";
2+
export { default as BottomNav } from "./BottomNav/BottomNav.svelte";
3+
export { default as SettingsNavigationButton } from "./SettingsNavigationButton/SettingsNavigationButton.svelte";
4+
export { default as MessageInput } from "./MessageInput/MessageInput.svelte";
5+
export { default as InputFile } from "./InputFile/InputFile.svelte";
6+
export { default as Drawer } from "./Drawer/Drawer.svelte";
7+
export { default as Message } from "./Message/Message.svelte";
8+
export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte";
9+
export { default as Modal } from "./Modal/Modal.svelte";
10+
export { default as SideBar } from "./SideBar/SideBar.svelte";
11+
export { default as RightAside } from "./RightAside/RightAside.svelte";
12+
export { default as SettingsToggleButton } from "./SettingsToggleButton/SettingsToggleButton.svelte";
13+
export { default as Post } from "./Post/Post.svelte";
14+
export { default as ChatMessage } from "./ChatMessage/ChatMessage.svelte";
15+
export { default as Comment } from "./Comment/Comment.svelte";
16+
export { default as SettingsDeleteButton } from "./SettingsDeleteButton/SettingsDeleteButton.svelte";
17+
export { default as UserRequest } from "./UserRequest/UserRequest.svelte";
18+
export { default as UploadedPostView } from "./UploadedPostView/UploadedPostView.svelte";

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<script lang="ts">
2+
import type { ISvgProps } from './../types';
3+
4+
let { size = '20px', color = '#DA4A11', ...restProps }: ISvgProps = $props();
5+
</script>
6+
7+
<svg
8+
width={size}
9+
height={size}
10+
viewBox="0 0 24 24"
11+
fill="none"
12+
xmlns="http://www.w3.org/2000/svg"
13+
{...restProps}
14+
>
15+
<rect width="24" height="24" rx="12" fill={color} />
16+
<path
17+
d="M16.0837 7.91663L7.91699 16.0833M7.91699 7.91663L16.0837 16.0833"
18+
stroke="white"
19+
stroke-width="1.75"
20+
stroke-linecap="round"
21+
stroke-linejoin="round"
22+
/>
23+
</svg>

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

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
export { default as Icons } from './Icons.svelte';
2-
export { default as Like } from './Like.svelte';
3-
export { default as Refresh } from './Refresh.svelte';
4-
export { default as CommentIcon } from './CommentIcon.svelte';
5-
export { default as VerticalDots } from './VerticalDots.svelte';
6-
export { default as Home } from './Home.svelte';
7-
export { default as Flash } from './Flash.svelte';
8-
export { default as CommentsTwo } from './CommentsTwo.svelte';
9-
export { default as Search } from './Search.svelte';
10-
export { default as Camera } from './Camera.svelte';
11-
export { default as Settings } from './Settings.svelte';
1+
export { default as Icons } from "./Icons.svelte";
2+
export { default as Like } from "./Like.svelte";
3+
export { default as Refresh } from "./Refresh.svelte";
4+
export { default as CommentIcon } from "./CommentIcon.svelte";
5+
export { default as VerticalDots } from "./VerticalDots.svelte";
6+
export { default as Home } from "./Home.svelte";
7+
export { default as Flash } from "./Flash.svelte";
8+
export { default as CommentsTwo } from "./CommentsTwo.svelte";
9+
export { default as Search } from "./Search.svelte";
10+
export { default as Camera } from "./Camera.svelte";
11+
export { default as Settings } from "./Settings.svelte";
12+
export { default as Cross } from "./Cross.svelte";

0 commit comments

Comments
 (0)