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