42 lines
949 B
TypeScript
42 lines
949 B
TypeScript
"use client"
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
interface UserAvatarProps {
|
|
bgColor?: string
|
|
text?: string
|
|
username?: string
|
|
size?: "sm" | "md" | "lg" | "xl"
|
|
className?: string
|
|
}
|
|
|
|
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
|
|
}: UserAvatarProps) {
|
|
// If no custom text, use first letter of username
|
|
const displayText = text || username.charAt(0).toUpperCase() || "?"
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"rounded-full flex items-center justify-center font-bold text-white shadow-md select-none",
|
|
sizeClasses[size],
|
|
className
|
|
)}
|
|
style={{ backgroundColor: bgColor }}
|
|
>
|
|
{displayText}
|
|
</div>
|
|
)
|
|
}
|