3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-08 03:57:30 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎨 Improve participant definition (#1337)

Browse source
This commit is contained in:
Luke Vella 2024-09-14 16:17:48 +01:00 • committed by GitHub
parent 12110be7c7
commit 4e7b391a9f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 269 additions and 238 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2,9 +2,24 @@
import * as React from "react";
import * as AvatarPrimitive from "@radix-ui/react-avatar";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@rallly/ui";
export const avatarColors = [
"indigo",
"green",
"blue",
"purple",
"emerald",
"violet",
"sky",
"cyan",
"pink",
] as const;
export type AvatarColor = (typeof avatarColors)[number];
const Avatar = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
@ -35,16 +50,44 @@ const AvatarImage = React.forwardRef<
));
AvatarImage.displayName = AvatarPrimitive.Image.displayName;
const avatarFallbackVariants = cva(
"flex h-full w-full items-center justify-center rounded-full font-medium",
{
variants: {
color: {
indigo: "bg-indigo-50 text-indigo-600",
green: "bg-green-50 text-green-600",
blue: "bg-blue-50 text-blue-600",
purple: "bg-purple-50 text-purple-600",
emerald: "bg-emerald-50 text-emerald-600",
violet: "bg-violet-50 text-violet-600",
sky: "bg-sky-50 text-sky-600",
cyan: "bg-cyan-50 text-cyan-600",
pink: "bg-pink-50 text-pink-600",
},
},
defaultVariants: {
color: "indigo",
},
},
);
export function getColor(seed: string): AvatarColor {
let hash = 0;
for (let i = 0; i < seed.length; i++) {
hash = seed.charCodeAt(i) + ((hash << 5) - hash);
}
return avatarColors[Math.abs(hash) % avatarColors.length];
}
const AvatarFallback = React.forwardRef<
React.ElementRef<typeof AvatarPrimitive.Fallback>,
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
>(({ className, ...props }, ref) => (
React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> &
VariantProps<typeof avatarFallbackVariants>
>(({ className, color, ...props }, ref) => (
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"bg-primary-100 text-primary-800 flex h-full w-full items-center justify-center rounded-full font-medium",
className,
)}
className={cn(avatarFallbackVariants({ color }), className)}
{...props}
/>
));