ProfileImage.tsx34 lines · main

1	import { User } from 'icons'
2	import Image from 'next/image'
3	import { ReactNode, useState } from 'react'
4	import { cn } from 'ui'
5
6	interface ProfileImageProps {
7	alt?: string
8	src?: string
9	placeholder?: ReactNode
10	className?: string
11	}
12
13	export const ProfileImage = ({ alt, src, placeholder, className }: ProfileImageProps) => {
14	const [hasInvalidImg, setHasInvalidImg] = useState(false)
15
16	return !!src && !hasInvalidImg ? (
17	<Image
18	alt={alt ?? ''}
19	src={src}
20	width="24"
21	height="24"
22	className={cn('aspect-square bg-foreground rounded-full object-cover', className)}
23	onError={() => setHasInvalidImg(true)}
24	/>
25	) : (
26	(placeholder ?? (
27	<figure
28	className={cn('bg-foreground rounded-full flex items-center justify-center', className)}
29	>
30	<User size={18} strokeWidth={1.5} className="text-background" />
31	</figure>
32	))
33	)
34	}