3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-04-28 17:56:37 +02:00
Code Issues Projects Releases Packages Wiki Activity

💄 Update avatar colours

Browse source
This commit is contained in:
Luke Vella 2025-03-24 13:38:00 +00:00
parent 72313920ce
commit 91cb7eb9ed
No known key found for this signature in database
GPG key ID: 469CAD687F0D784C
1 changed files with 25 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
packages/ui/src/avatar.tsx
View file

@ -12,10 +12,7 @@ const Avatar = React.forwardRef<
>(({ className, size = 48, ...props }, ref) => ( >(({ className, size = 48, ...props }, ref) => (
<AvatarPrimitive.Root <AvatarPrimitive.Root
ref={ref} ref={ref}
className={cn( className={cn("relative flex shrink-0 overflow-hidden", className)}
"relative flex shrink-0 overflow-hidden rounded-full",
className,
)}
style={{ width: size, height: size }} style={{ width: size, height: size }}
{...props} {...props}
/> />
@ -34,30 +31,31 @@ const AvatarImage = React.forwardRef<
)); ));
AvatarImage.displayName = AvatarPrimitive.Image.displayName; AvatarImage.displayName = AvatarPrimitive.Image.displayName;
const colorPairs = [ const synthwaveGradients = [
{ bg: "#E6F4FF", text: "#0065BD" }, // Light blue { from: "#FF36F5", to: "#FF36F5CC" }, // Vibrant Pink to Transparent Pink
{ bg: "#DCFCE7", text: "#15803D" }, // Light green { from: "#B026FF", to: "#B026FFCC" }, // Vibrant Purple to Transparent Purple
{ bg: "#FFE6F4", text: "#BD007A" }, // Light pink { from: "#FF2182", to: "#FF2182CC" }, // Hot Pink to Transparent Hot Pink
{ bg: "#F4E6FF", text: "#6200BD" }, // Light purple { from: "#9D4EDD", to: "#9D4EDDCC" }, // Bright Purple to Transparent Bright Purple
{ bg: "#FFE6E6", text: "#BD0000" }, // Light red { from: "#7B2CBF", to: "#7B2CBFCC" }, // Deep Purple to Transparent Deep Purple
{ bg: "#FFE6FF", text: "#A300A3" }, // Bright pink { from: "#F72585", to: "#F72585CC" }, // Vibrant Pink to Transparent Vibrant Pink
{ bg: "#F0E6FF", text: "#5700BD" }, // Lavender { from: "#4361EE", to: "#4361EECC" }, // Bright Blue to Transparent Bright Blue
{ bg: "#FFE6F9", text: "#BD0066" }, // Rose { from: "#FF0099", to: "#FF0099CC" }, // Neon Pink to Transparent Neon Pink
{ bg: "#E6E6FF", text: "#0000BD" }, // Periwinkle { from: "#6A00F4", to: "#6A00F4CC" }, // Electric Purple to Transparent Electric Purple
{ bg: "#FFE6EC", text: "#BD001F" }, // Salmon pink { from: "#D100D1", to: "#D100D1CC" }, // Magenta to Transparent Magenta
{ bg: "#EBE6FF", text: "#4800BD" }, // Light indigo { from: "#FF61C3", to: "#FF61C3CC" }, // Bright Pink to Transparent Bright Pink
]; ];
export function getColor(seed: string): { export function getGradient(seed: string): {
bgColor: string; fromColor: string;
textColor: string; toColor: string;
} { } {
let hash = 0; let hash = 0;
for (let i = 0; i < seed.length; i++) { for (let i = 0; i < seed.length; i++) {
hash = seed.charCodeAt(i) + ((hash << 5) - hash); hash = seed.charCodeAt(i) + ((hash << 5) - hash);
} }
const colorPair = colorPairs[Math.abs(hash) % colorPairs.length]; const gradient =
return { bgColor: colorPair.bg, textColor: colorPair.text }; synthwaveGradients[Math.abs(hash) % synthwaveGradients.length];
return { fromColor: gradient.from, toColor: gradient.to };
} }
const AvatarFallback = React.forwardRef< const AvatarFallback = React.forwardRef<
@ -66,15 +64,18 @@ const AvatarFallback = React.forwardRef<
seed: string; seed: string;
} }
>(({ className, seed, ...props }, ref) => { >(({ className, seed, ...props }, ref) => {
const { bgColor, textColor } = getColor(seed); const { fromColor, toColor } = getGradient(seed);
return ( return (
<AvatarPrimitive.Fallback <AvatarPrimitive.Fallback
ref={ref} ref={ref}
className={cn( className={cn(
"flex h-full w-full items-center justify-center rounded-full font-medium", "flex h-full w-full items-center justify-center font-medium",
className, className,
)} )}
style={{ backgroundColor: bgColor, color: textColor }} style={{
background: `linear-gradient(135deg, ${fromColor} 0%, ${toColor} 100%)`,
color: "white",
}}
{...props} {...props}
/> />
); );