2024-11-11 22:02:34 +01:00

42 lines
873 B
TypeScript

import { cn } from "@/lib/utils"
export default function Avatar({
name,
avatarUrl,
className,
}: {
name: string
avatarUrl?: string | null
className?: string
}) {
// Generate initials from name if no avatarUrl is provided
const initials = name
? name
.split(" ")
.slice(0, 2)
.map((letter) => letter[0].toUpperCase())
.join("")
: "?"
return (
<div
className={cn(
"size-9 font-mono rounded-full overflow-hidden bg-gradient-to-t from-neutral-800 to-neutral-600 flex items-center justify-center text-sm font-medium",
className
)}
>
{avatarUrl ? (
<img
src={avatarUrl}
alt={name || "User"}
width={20}
height={20}
className="w-full h-full object-cover"
/>
) : (
initials
)}
</div>
)
}