@soul-refiner/design-system 0.1.9 → 0.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -63,6 +63,7 @@ export interface AvatarProps extends NativeProps {
|
|
|
63
63
|
size: Size;
|
|
64
64
|
status?: Status;
|
|
65
65
|
subtitle?: React.ReactNode;
|
|
66
|
+
sx?: string;
|
|
66
67
|
textPosition?: 'left' | 'right';
|
|
67
68
|
title?: React.ReactNode;
|
|
68
69
|
}
|
|
@@ -135,6 +136,7 @@ const Avatar = ({
|
|
|
135
136
|
size = 64,
|
|
136
137
|
status,
|
|
137
138
|
subtitle,
|
|
139
|
+
sx,
|
|
138
140
|
textPosition = 'left',
|
|
139
141
|
title,
|
|
140
142
|
...rest
|
|
@@ -144,7 +146,7 @@ const Avatar = ({
|
|
|
144
146
|
const Icon = iconReference?.[status ?? 'none'];
|
|
145
147
|
|
|
146
148
|
return (
|
|
147
|
-
<Box $align="center" $gap={18} {...rest}>
|
|
149
|
+
<Box $align="center" $gap={18} {...rest} sx={sx}>
|
|
148
150
|
<Container as={as} $size={size} href={href}>
|
|
149
151
|
{!displayDefault && (
|
|
150
152
|
<img src={image ?? ''} onError={() => setDisplayDefault(true)} />
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { Avatar, Box, P, H } from 'components';
|
|
4
|
+
|
|
5
|
+
export interface MessageProps {
|
|
6
|
+
messages: {
|
|
7
|
+
content: string;
|
|
8
|
+
senderHref: string;
|
|
9
|
+
senderId: string;
|
|
10
|
+
senderName: string;
|
|
11
|
+
senderAvatarURI: string;
|
|
12
|
+
createdDate: Date;
|
|
13
|
+
}[];
|
|
14
|
+
userId: string;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const Message = ({ messages, userId }: MessageProps) => {
|
|
18
|
+
const id = React.useId();
|
|
19
|
+
return (
|
|
20
|
+
<Box $display="flex" $dir="column" $gap={16}>
|
|
21
|
+
{messages.map(
|
|
22
|
+
(
|
|
23
|
+
{
|
|
24
|
+
content,
|
|
25
|
+
createdDate,
|
|
26
|
+
senderAvatarURI,
|
|
27
|
+
senderHref,
|
|
28
|
+
senderId,
|
|
29
|
+
senderName,
|
|
30
|
+
},
|
|
31
|
+
index
|
|
32
|
+
) => {
|
|
33
|
+
const isSelf = senderId === userId;
|
|
34
|
+
const isFirstMessageBySender =
|
|
35
|
+
messages?.[index - 1]?.senderId !== senderId;
|
|
36
|
+
|
|
37
|
+
if (isSelf) {
|
|
38
|
+
return (
|
|
39
|
+
<React.Fragment key={id + index}>
|
|
40
|
+
{isFirstMessageBySender && (
|
|
41
|
+
<P
|
|
42
|
+
$color="grey-4"
|
|
43
|
+
$fontSize={12}
|
|
44
|
+
$lineHeight={16}
|
|
45
|
+
sx="margin-top: 40px; margin-left: auto;"
|
|
46
|
+
>
|
|
47
|
+
{createdDate.toLocaleDateString()}{' '}
|
|
48
|
+
{createdDate.toLocaleTimeString()}
|
|
49
|
+
</P>
|
|
50
|
+
)}
|
|
51
|
+
<Wrapper $isSelf={isSelf}>{content}</Wrapper>
|
|
52
|
+
</React.Fragment>
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<React.Fragment key={id + index}>
|
|
58
|
+
{isFirstMessageBySender && (
|
|
59
|
+
<Avatar
|
|
60
|
+
image={senderAvatarURI}
|
|
61
|
+
href={senderHref}
|
|
62
|
+
subtitle={
|
|
63
|
+
<P
|
|
64
|
+
as="span"
|
|
65
|
+
$color="blue-2"
|
|
66
|
+
$fontSize={12}
|
|
67
|
+
$lineHeight={16}
|
|
68
|
+
sx="vertical-align: top;"
|
|
69
|
+
>
|
|
70
|
+
{createdDate.toLocaleTimeString()}
|
|
71
|
+
</P>
|
|
72
|
+
}
|
|
73
|
+
size={56}
|
|
74
|
+
sx="margin-top: 40px;"
|
|
75
|
+
textPosition="right"
|
|
76
|
+
title={
|
|
77
|
+
<H
|
|
78
|
+
as="span"
|
|
79
|
+
$color="blue-2"
|
|
80
|
+
$fontSize={18}
|
|
81
|
+
$lineHeight={26}
|
|
82
|
+
$mediumBold
|
|
83
|
+
>
|
|
84
|
+
{senderName}
|
|
85
|
+
</H>
|
|
86
|
+
}
|
|
87
|
+
/>
|
|
88
|
+
)}
|
|
89
|
+
<Wrapper $isSelf={isSelf}>{content}</Wrapper>
|
|
90
|
+
</React.Fragment>
|
|
91
|
+
);
|
|
92
|
+
}
|
|
93
|
+
)}
|
|
94
|
+
</Box>
|
|
95
|
+
);
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
const Wrapper = styled.div<{
|
|
99
|
+
$isSelf: boolean;
|
|
100
|
+
}>`
|
|
101
|
+
max-width: 552px;
|
|
102
|
+
padding: 16px;
|
|
103
|
+
border-radius: 16px;
|
|
104
|
+
font-family: Inter;
|
|
105
|
+
font-size: 14px;
|
|
106
|
+
line-height: 20px;
|
|
107
|
+
letter-spacing: -0.006em;
|
|
108
|
+
|
|
109
|
+
${({ $isSelf }) =>
|
|
110
|
+
$isSelf
|
|
111
|
+
? `
|
|
112
|
+
margin-left: auto;
|
|
113
|
+
color: var(--color-white);
|
|
114
|
+
background-color: var(--color-primary-blue-2);
|
|
115
|
+
border-top-right-radius: 0px;`
|
|
116
|
+
: `
|
|
117
|
+
margin-left: 68px;
|
|
118
|
+
margin-right: auto;
|
|
119
|
+
color: var(--color-grey-3);
|
|
120
|
+
background-color: var(--color-grey-9);
|
|
121
|
+
border-top-left-radius: 0px;`}
|
|
122
|
+
`;
|