Skip to content

Commit 04cb3be

Browse files
committed
chore: renamed to a consistent namimg convention of handle instead of username.
1 parent f2f646e commit 04cb3be

File tree

14 files changed

+191
-185
lines changed

14 files changed

+191
-185
lines changed
Lines changed: 83 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,87 @@
1-
import type { CommentType } from './types';
1+
import type { CommentType } from "./types";
22
export const dummyPosts = Array.from({ length: 100 }, (_, i) => ({
3-
id: (i + 1).toString(),
4-
avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
5-
userId: (i + 1).toString(),
6-
username: `user${i + 1}`,
7-
imgUris: [
8-
'https://picsum.photos/800',
9-
'https://picsum.photos/600',
10-
'https://picsum.photos/800',
11-
'https://picsum.photos/600'
12-
],
13-
caption: `This is post number ${i + 1}. Loving how these shots came out! :camera_with_flash:`,
14-
time: `${i + 1} hours ago`,
15-
count: {
16-
likes: Math.floor(Math.random() * 500),
17-
comments: Math.floor(Math.random() * 200)
18-
}
3+
id: (i + 1).toString(),
4+
avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
5+
userId: (i + 1).toString(),
6+
handle: `user${i + 1}`,
7+
imgUris: [
8+
"https://picsum.photos/800",
9+
"https://picsum.photos/600",
10+
"https://picsum.photos/800",
11+
"https://picsum.photos/600",
12+
],
13+
caption: `This is post number ${i + 1}. Loving how these shots came out! :camera_with_flash:`,
14+
time: `${i + 1} hours ago`,
15+
count: {
16+
likes: Math.floor(Math.random() * 500),
17+
comments: Math.floor(Math.random() * 200),
18+
},
1919
}));
2020
export const comments: CommentType[] = Array.from({ length: 50 }, (_, i) => ({
21-
userImgSrc: 'https://picsum.photos/800',
22-
name: `user${i + 1}`,
23-
commentId: `${i + 1}p`,
24-
comment: `this is the dummy comment which is commented by user${i + 1}`,
25-
isUpVoted: false,
26-
isDownVoted: false,
27-
upVotes: 0,
28-
time: '2 minutes ago',
29-
replies: [
30-
{
31-
userImgSrc: 'https://picsum.photos/800',
32-
name: `user${i + 1}x`,
33-
commentId: `${i + 1}x`,
34-
comment: `this is the dummy reply which is replied by another${i}x`,
35-
isUpVoted: false,
36-
isDownVoted: false,
37-
upVotes: 0,
38-
time: '1 minute ago',
39-
replies: [
40-
{
41-
userImgSrc: 'https://picsum.photos/800',
42-
name: `user${i + 1}a`,
43-
commentId: `${i + 1}a`,
44-
comment: `this is the dummy reply which is replied by another${i}a`,
45-
isUpVoted: false,
46-
isDownVoted: false,
47-
upVotes: 0,
48-
time: '1 minute ago',
49-
replies: []
50-
}
51-
]
52-
},
53-
{
54-
userImgSrc: 'https://picsum.photos/800',
55-
name: `user${i + 1}y`,
56-
commentId: `${i + 1}y`,
57-
comment: `this is the dummy reply which is replied by another${i}y`,
58-
isUpVoted: false,
59-
isDownVoted: false,
60-
upVotes: 0,
61-
time: '1 minute ago',
62-
replies: []
63-
},
64-
{
65-
userImgSrc: 'https://picsum.photos/800',
66-
name: `user${i + 1}y`,
67-
commentId: `${i + 1}y`,
68-
comment: `this is the dummy reply which is replied by another${i}y`,
69-
isUpVoted: false,
70-
isDownVoted: false,
71-
upVotes: 0,
72-
time: '1 minute ago',
73-
replies: []
74-
},
75-
{
76-
userImgSrc: 'https://picsum.photos/800',
77-
name: `user${i + 1}y`,
78-
commentId: `${i + 1}y`,
79-
comment: `this is the dummy reply which is replied by another${i}y`,
80-
isUpVoted: false,
81-
isDownVoted: false,
82-
upVotes: 0,
83-
time: '1 minute ago',
84-
replies: []
85-
}
86-
]
21+
userImgSrc: "https://picsum.photos/800",
22+
name: `user${i + 1}`,
23+
commentId: `${i + 1}p`,
24+
comment: `this is the dummy comment which is commented by user${i + 1}`,
25+
isUpVoted: false,
26+
isDownVoted: false,
27+
upVotes: 0,
28+
time: "2 minutes ago",
29+
replies: [
30+
{
31+
userImgSrc: "https://picsum.photos/800",
32+
name: `user${i + 1}x`,
33+
commentId: `${i + 1}x`,
34+
comment: `this is the dummy reply which is replied by another${i}x`,
35+
isUpVoted: false,
36+
isDownVoted: false,
37+
upVotes: 0,
38+
time: "1 minute ago",
39+
replies: [
40+
{
41+
userImgSrc: "https://picsum.photos/800",
42+
name: `user${i + 1}a`,
43+
commentId: `${i + 1}a`,
44+
comment: `this is the dummy reply which is replied by another${i}a`,
45+
isUpVoted: false,
46+
isDownVoted: false,
47+
upVotes: 0,
48+
time: "1 minute ago",
49+
replies: [],
50+
},
51+
],
52+
},
53+
{
54+
userImgSrc: "https://picsum.photos/800",
55+
name: `user${i + 1}y`,
56+
commentId: `${i + 1}y`,
57+
comment: `this is the dummy reply which is replied by another${i}y`,
58+
isUpVoted: false,
59+
isDownVoted: false,
60+
upVotes: 0,
61+
time: "1 minute ago",
62+
replies: [],
63+
},
64+
{
65+
userImgSrc: "https://picsum.photos/800",
66+
name: `user${i + 1}y`,
67+
commentId: `${i + 1}y`,
68+
comment: `this is the dummy reply which is replied by another${i}y`,
69+
isUpVoted: false,
70+
isDownVoted: false,
71+
upVotes: 0,
72+
time: "1 minute ago",
73+
replies: [],
74+
},
75+
{
76+
userImgSrc: "https://picsum.photos/800",
77+
name: `user${i + 1}y`,
78+
commentId: `${i + 1}y`,
79+
comment: `this is the dummy reply which is replied by another${i}y`,
80+
isUpVoted: false,
81+
isDownVoted: false,
82+
upVotes: 0,
83+
time: "1 minute ago",
84+
replies: [],
85+
},
86+
],
8787
}));
Lines changed: 26 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,35 @@
1-
import type { ComponentProps } from 'svelte';
2-
import Message from './Message.svelte';
1+
import type { ComponentProps } from "svelte";
2+
import Message from "./Message.svelte";
33

44
export default {
5-
title: 'UI/Message',
6-
component: Message,
7-
tags: ['autodocs'],
8-
render: (args: { Component: Message; props: ComponentProps<typeof Message> }) => ({
9-
Component: Message,
10-
props: args
11-
})
5+
title: "UI/Message",
6+
component: Message,
7+
tags: ["autodocs"],
8+
render: (args: {
9+
Component: Message;
10+
props: ComponentProps<typeof Message>;
11+
}) => ({
12+
Component: Message,
13+
props: args,
14+
}),
1215
};
1316

1417
export const Primary = {
15-
args: {
16-
avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
17-
username: 'donaldthefirstt',
18-
text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
19-
unread: false,
20-
callback: () => alert('Message clicked')
21-
}
18+
args: {
19+
avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
20+
handle: "donaldthefirstt",
21+
text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
22+
unread: false,
23+
callback: () => alert("Message clicked"),
24+
},
2225
};
2326

2427
export const Unread = {
25-
args: {
26-
avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
27-
username: 'donaldthefirstt',
28-
text: 'i was thinking of making it to the conference so we could take some more fire pictures like last time',
29-
unread: true,
30-
callback: () => alert('Message clicked')
31-
}
28+
args: {
29+
avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
30+
handle: "donaldthefirstt",
31+
text: "i was thinking of making it to the conference so we could take some more fire pictures like last time",
32+
unread: true,
33+
callback: () => alert("Message clicked"),
34+
},
3235
};

platforms/pictique/src/lib/fragments/Message/Message.svelte

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@
55
66
interface IMessageProps extends HTMLAttributes<HTMLButtonElement> {
77
avatar: string;
8-
username: string;
8+
handle: string;
99
text: string;
1010
unread?: boolean;
1111
callback: () => void;
1212
}
1313
1414
const {
1515
avatar,
16-
username,
16+
handle,
1717
text,
1818
unread = false,
1919
callback,
@@ -34,7 +34,7 @@
3434
<Avatar src={avatar} alt="User Avatar" size="md" />
3535
<span class="flex w-full flex-col items-start justify-end gap-1">
3636
<span class="flex w-full items-center justify-between">
37-
<h2>{username}</h2>
37+
<h2>{handle}</h2>
3838
{#if unread}
3939
<span class="h-2 w-2 rounded-full bg-blue-500"></span>
4040
{/if}
@@ -46,10 +46,10 @@
4646
<!--
4747
@component
4848
@name Message
49-
@description A message component that displays a user's avatar, username, and message text. It also includes an optional unread indicator.
49+
@description A message component that displays a user's avatar, handle, and message text. It also includes an optional unread indicator.
5050
@props
5151
- avatar: string - The URL of the user's avatar image.
52-
- username: string - The name of the user.
52+
- handle: string - The name of the user.
5353
- text: string - The message text.
5454
- unread: boolean - Optional. Indicates if the message is unread. Defaults to false.
5555
- callback: () => void - Function to call when the message is clicked.
@@ -60,7 +60,7 @@
6060
6161
<Message
6262
avatar="https://example.com/avatar.jpg"
63-
username="John Doe"
63+
handle="John Doe"
6464
text="Hello, how are you?"
6565
unread={true}
6666
callback={() => console.log('Message clicked')}
Lines changed: 38 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,44 @@
1-
import type { ComponentProps } from 'svelte';
2-
import Post from './Post.svelte';
1+
import type { ComponentProps } from "svelte";
2+
import Post from "./Post.svelte";
33

44
export default {
5-
title: 'ui/Post',
6-
component: Post,
7-
tags: ['autodocs'],
8-
render: (args: { Component: Post; props: ComponentProps<typeof Post> }) => ({
9-
Component: Post,
10-
props: args
11-
})
5+
title: "ui/Post",
6+
component: Post,
7+
tags: ["autodocs"],
8+
render: (args: {
9+
Component: Post;
10+
props: ComponentProps<typeof Post>;
11+
}) => ({
12+
Component: Post,
13+
props: args,
14+
}),
1215
};
1316

1417
export const Primary = {
15-
args: {
16-
avatar: 'https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250',
17-
username: 'blurryface',
18-
imgUris: [
19-
'https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg',
20-
'https://picsum.photos/200'
21-
],
22-
postAlt: 'Sample',
23-
text: 'Took some pictures today! Really love how this one in particular turned out! ',
24-
time: '2 hours ago',
25-
count: {
26-
likes: 100,
27-
comments: 50
28-
},
29-
callback: {
30-
like: () => {
31-
alert('Like clicked');
32-
},
33-
comment: () => {
34-
alert('Comment clicked');
35-
},
36-
menu: () => {
37-
alert('Menu clicked');
38-
}
39-
}
40-
}
18+
args: {
19+
avatar: "https://www.gravatar.com/avatar/2c7d99fe281ecd3bcd65ab915bac6dd5?s=250",
20+
handle: "blurryface",
21+
imgUris: [
22+
"https://graphicsfamily.com/wp-content/uploads/edd/2023/01/Free-Photographer-Social-Media-Post-Design-Template-870x870.jpg",
23+
"https://picsum.photos/200",
24+
],
25+
postAlt: "Sample",
26+
text: "Took some pictures today! Really love how this one in particular turned out! ",
27+
time: "2 hours ago",
28+
count: {
29+
likes: 100,
30+
comments: 50,
31+
},
32+
callback: {
33+
like: () => {
34+
alert("Like clicked");
35+
},
36+
comment: () => {
37+
alert("Comment clicked");
38+
},
39+
menu: () => {
40+
alert("Menu clicked");
41+
},
42+
},
43+
},
4144
};

0 commit comments

Comments
 (0)