@linktr.ee/messaging-react 1.2.0 → 1.3.0-rc-1761055628
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.
|
@@ -2,25 +2,24 @@
|
|
|
2
2
|
* Generate avatar background and text colors based on a string
|
|
3
3
|
* Uses the ID to deterministically select from design system colors
|
|
4
4
|
*/
|
|
5
|
-
export function
|
|
6
|
-
|
|
7
|
-
textColor: string
|
|
5
|
+
export function getAvatarColor(id: string): {
|
|
6
|
+
color: string
|
|
8
7
|
} {
|
|
9
8
|
// Map of color combinations from Linktree design system
|
|
10
9
|
// Selected for good contrast at 20% opacity
|
|
11
|
-
const
|
|
12
|
-
{
|
|
13
|
-
{
|
|
14
|
-
{
|
|
15
|
-
{
|
|
16
|
-
{
|
|
17
|
-
{
|
|
18
|
-
{
|
|
19
|
-
{
|
|
20
|
-
{
|
|
21
|
-
{
|
|
22
|
-
{
|
|
23
|
-
{
|
|
10
|
+
const colors = [
|
|
11
|
+
{ color: '#8129D9' }, // purple
|
|
12
|
+
{ color: '#254f1a' }, // dark green
|
|
13
|
+
{ color: '#061492' }, // dark blue
|
|
14
|
+
{ color: '#1e2330' }, // dark blue-gray
|
|
15
|
+
{ color: '#502274' }, // dark purple
|
|
16
|
+
{ color: '#d717e7' }, // magenta
|
|
17
|
+
{ color: '#780016' }, // dark red
|
|
18
|
+
{ color: '#c41500' }, // red
|
|
19
|
+
{ color: '#fc3e4b' }, // pink
|
|
20
|
+
{ color: '#4c2e05' }, // brown
|
|
21
|
+
{ color: '#ff6c02' }, // orange
|
|
22
|
+
{ color: '#70764d' }, // olive green
|
|
24
23
|
]
|
|
25
24
|
|
|
26
25
|
// Simple hash function to get consistent index
|
|
@@ -30,6 +29,6 @@ export function getAvatarColors(id: string): {
|
|
|
30
29
|
hash = hash & hash // Convert to 32bit integer
|
|
31
30
|
}
|
|
32
31
|
|
|
33
|
-
const index = Math.abs(hash) %
|
|
34
|
-
return
|
|
32
|
+
const index = Math.abs(hash) % colors.length
|
|
33
|
+
return colors[index]
|
|
35
34
|
}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import classNames from 'classnames'
|
|
2
|
-
import React from 'react'
|
|
1
|
+
import classNames from 'classnames'
|
|
2
|
+
import React from 'react'
|
|
3
3
|
|
|
4
|
-
import {
|
|
4
|
+
import { getAvatarColor } from './avatarColors'
|
|
5
5
|
|
|
6
6
|
export interface AvatarProps {
|
|
7
|
-
id: string
|
|
8
|
-
name: string
|
|
9
|
-
image?: string
|
|
10
|
-
size?: number
|
|
11
|
-
className?: string
|
|
7
|
+
id: string
|
|
8
|
+
name: string
|
|
9
|
+
image?: string
|
|
10
|
+
size?: number
|
|
11
|
+
className?: string
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
/**
|
|
@@ -21,17 +21,17 @@ export const Avatar: React.FC<AvatarProps> = ({
|
|
|
21
21
|
size = 40,
|
|
22
22
|
className,
|
|
23
23
|
}) => {
|
|
24
|
-
const {
|
|
25
|
-
const initial = name.charAt(0).toUpperCase()
|
|
24
|
+
const { color } = getAvatarColor(id)
|
|
25
|
+
const initial = name.charAt(0).toUpperCase()
|
|
26
26
|
|
|
27
27
|
// Determine font size based on avatar size
|
|
28
28
|
const getFontSizeClass = () => {
|
|
29
|
-
if (size < 32) return 'text-xs'
|
|
30
|
-
if (size < 56) return 'text-sm'
|
|
31
|
-
return 'text-lg'
|
|
32
|
-
}
|
|
29
|
+
if (size < 32) return 'text-xs'
|
|
30
|
+
if (size < 56) return 'text-sm'
|
|
31
|
+
return 'text-lg'
|
|
32
|
+
}
|
|
33
33
|
|
|
34
|
-
const fontSizeClass = getFontSizeClass()
|
|
34
|
+
const fontSizeClass = getFontSizeClass()
|
|
35
35
|
|
|
36
36
|
return (
|
|
37
37
|
<div
|
|
@@ -49,17 +49,19 @@ export const Avatar: React.FC<AvatarProps> = ({
|
|
|
49
49
|
/>
|
|
50
50
|
) : (
|
|
51
51
|
<div
|
|
52
|
+
aria-hidden="true"
|
|
52
53
|
className={classNames(
|
|
53
54
|
'flex h-full w-full items-center justify-center font-semibold',
|
|
54
|
-
bgColor,
|
|
55
|
-
textColor,
|
|
56
55
|
fontSizeClass
|
|
57
56
|
)}
|
|
57
|
+
style={{
|
|
58
|
+
color,
|
|
59
|
+
backgroundColor: `color-mix(in srgb, ${color} 20%, transparent)`,
|
|
60
|
+
}}
|
|
58
61
|
>
|
|
59
62
|
{initial}
|
|
60
63
|
</div>
|
|
61
64
|
)}
|
|
62
65
|
</div>
|
|
63
|
-
)
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
+
)
|
|
67
|
+
}
|
|
@@ -144,7 +144,7 @@ export const MessagingShell: React.FC<MessagingShellProps> = ({
|
|
|
144
144
|
)
|
|
145
145
|
}
|
|
146
146
|
|
|
147
|
-
const channel = await service.
|
|
147
|
+
const channel = await service.startChannelWithParticipant({
|
|
148
148
|
id: participant.id,
|
|
149
149
|
name: participant.name,
|
|
150
150
|
email: participant.email,
|