57 lines
1.2 KiB
TypeScript
57 lines
1.2 KiB
TypeScript
"use client"
|
|
|
|
import Image from "next/image"
|
|
import { useState } from "react"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
const DEFAULT_AVATAR_SRC = "/images/jessica-avatar.jpg"
|
|
|
|
type AssistantAvatarProps = {
|
|
alt?: string
|
|
className?: string
|
|
sizeClassName?: string
|
|
src?: string
|
|
}
|
|
|
|
export function AssistantAvatar({
|
|
alt = "Jessica",
|
|
className,
|
|
sizeClassName = "h-10 w-10",
|
|
src = DEFAULT_AVATAR_SRC,
|
|
}: AssistantAvatarProps) {
|
|
const [hasError, setHasError] = useState(false)
|
|
|
|
if (hasError) {
|
|
return (
|
|
<div
|
|
aria-hidden="true"
|
|
className={cn(
|
|
"flex items-center justify-center overflow-hidden rounded-full border border-white/60 bg-gradient-to-br from-stone-200 via-amber-50 to-stone-300 font-semibold text-stone-700 shadow-sm",
|
|
sizeClassName,
|
|
className
|
|
)}
|
|
>
|
|
J
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"relative overflow-hidden rounded-full border border-white/60 bg-stone-100 shadow-sm",
|
|
sizeClassName,
|
|
className
|
|
)}
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={alt}
|
|
fill
|
|
sizes="64px"
|
|
className="object-cover"
|
|
onError={() => setHasError(true)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|