45 lines
1.0 KiB
TypeScript
45 lines
1.0 KiB
TypeScript
|
import * as React from 'react'
|
||
|
|
import { cn } from '@/lib/utils'
|
||
|
|
|
||
|
|
interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
|
||
|
|
src?: string
|
||
|
|
alt?: string
|
||
|
|
fallback?: string
|
||
|
|
size?: 'sm' | 'md' | 'lg'
|
||
|
|
}
|
||
|
|
|
||
|
|
const sizeClasses = {
|
||
|
|
sm: 'h-8 w-8 text-xs',
|
||
|
|
md: 'h-10 w-10 text-sm',
|
||
|
|
lg: 'h-12 w-12 text-base',
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Avatar({ src, alt, fallback, size = 'md', className, ...props }: AvatarProps) {
|
||
|
|
const [error, setError] = React.useState(false)
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
'relative flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-studio-medium',
|
||
|
|
sizeClasses[size],
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{src && !error ? (
|
||
|
|
<img
|
||
|
|
src={src}
|
||
|
|
alt={alt}
|
||
|
|
className="h-full w-full object-cover"
|
||
|
|
onError={() => setError(true)}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<span className="font-medium text-foreground">
|
||
|
|
{fallback || (alt ? alt.charAt(0).toUpperCase() : '?')}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|