42 lines
1 KiB
TypeScript
42 lines
1 KiB
TypeScript
import { cn } from "@/lib/utils"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
|
|
interface UserAvatarProps {
|
|
bgColor?: string
|
|
text?: string
|
|
username?: string
|
|
size?: "sm" | "md" | "lg" | "xl"
|
|
className?: string
|
|
src?: string | null
|
|
}
|
|
|
|
const sizeClasses = {
|
|
sm: "h-8 w-8 text-xs",
|
|
md: "h-10 w-10 text-sm",
|
|
lg: "h-16 w-16 text-xl",
|
|
xl: "h-32 w-32 text-4xl",
|
|
}
|
|
|
|
export function UserAvatar({
|
|
bgColor = "#3B82F6",
|
|
text,
|
|
username = "",
|
|
size = "md",
|
|
className,
|
|
src
|
|
}: UserAvatarProps) {
|
|
// If no custom text, use first letter of username
|
|
const displayText = text || username.charAt(0).toUpperCase() || "?"
|
|
|
|
return (
|
|
<Avatar className={cn(sizeClasses[size], className)}>
|
|
<AvatarImage src={src || undefined} alt={username} />
|
|
<AvatarFallback
|
|
className="font-bold text-white"
|
|
style={{ backgroundColor: bgColor }}
|
|
>
|
|
{displayText}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
)
|
|
}
|