oneslash-design-system 1.1.30 → 1.1.31
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/components/userImage.tsx +47 -8
- package/package.json +1 -1
package/components/userImage.tsx
CHANGED
|
@@ -6,18 +6,57 @@ interface UserImageProps {
|
|
|
6
6
|
userImgUrl?: string;
|
|
7
7
|
}
|
|
8
8
|
|
|
9
|
+
//read initials from userHandle
|
|
10
|
+
function getInitials(userHandle: string): string {
|
|
11
|
+
const words = userHandle.trim().split(/\s+/);
|
|
12
|
+
return words.slice(0, 2).map(word => word.charAt(0).toUpperCase()).join('');
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
function getColorSeed(userHandle: string): string {
|
|
16
|
+
const words = userHandle.trim().split(/\s+/);
|
|
17
|
+
let letters = words.map(word => word.charAt(0).toLowerCase());
|
|
18
|
+
if (letters.length === 1 && words[0].length >= 2) {
|
|
19
|
+
letters.push(words[0].charAt(1).toLowerCase());
|
|
20
|
+
} else if (letters.length > 2) {
|
|
21
|
+
letters = letters.slice(0, 2);
|
|
22
|
+
} else if (letters.length === 0) {
|
|
23
|
+
letters = ['x', 'x'];
|
|
24
|
+
}
|
|
25
|
+
return letters.join('');
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
function getHash(str: string): number {
|
|
29
|
+
let hash = 0;
|
|
30
|
+
for (let i = 0; i < str.length; i++) {
|
|
31
|
+
hash = str.charCodeAt(i) + ((hash << 5) - hash);
|
|
32
|
+
}
|
|
33
|
+
return hash;
|
|
34
|
+
}
|
|
35
|
+
|
|
9
36
|
export default function UserImage({
|
|
10
37
|
userHandle,
|
|
11
38
|
userImgUrl,
|
|
12
39
|
}: UserImageProps) {
|
|
13
40
|
|
|
14
|
-
const
|
|
41
|
+
const displayInitial = userHandle.charAt(0).toUpperCase() || 'A';
|
|
42
|
+
const seed = getColorSeed(userHandle);
|
|
43
|
+
const hue = Math.abs(getHash(seed)) % 360;
|
|
44
|
+
|
|
45
|
+
// Light mode: lighter pastel
|
|
46
|
+
const lightBg = `hsl(${hue}, 20%, 80%)`;
|
|
47
|
+
// Dark mode: darker variant
|
|
48
|
+
const darkBg = `hsl(${hue}, 20%, 30%)`;
|
|
15
49
|
|
|
16
50
|
return (
|
|
17
|
-
<div
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
51
|
+
<div
|
|
52
|
+
style={{
|
|
53
|
+
'--light-bg': lightBg,
|
|
54
|
+
'--dark-bg': darkBg,
|
|
55
|
+
} as React.CSSProperties}
|
|
56
|
+
className={`flex items-center justify-center w-6 h-6 rounded-full overflow-hidden
|
|
57
|
+
bg-[var(--light-bg)] dark:bg-[var(--dark-bg)]
|
|
58
|
+
text-light-text-secondary dark:text-dark-text-secondary`}
|
|
59
|
+
>
|
|
21
60
|
{userImgUrl ? (
|
|
22
61
|
<img
|
|
23
62
|
src={userImgUrl}
|
|
@@ -25,9 +64,9 @@ export default function UserImage({
|
|
|
25
64
|
className="w-full h-full object-cover rounded-full"
|
|
26
65
|
/>
|
|
27
66
|
) : (
|
|
28
|
-
<span className="text-body1">
|
|
29
|
-
|
|
30
|
-
|
|
67
|
+
<span className="text-body1 text-light-text-secondary dark:text-dark-text-secondary">
|
|
68
|
+
{displayInitial}
|
|
69
|
+
</span>
|
|
31
70
|
)}
|
|
32
71
|
</div>
|
|
33
72
|
);
|