Avatar

1import * as React from 'react'
2import * as AvatarPrimitive from '@radix-ui/react-avatar'
3import { cn } from '@/lib/utils'
4 
5const Avatar = React.forwardRef<
6  React.ElementRef<typeof AvatarPrimitive.Root>,
7  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
8>(({ className, ...props }, ref) => (
9  <AvatarPrimitive.Root
10    ref={ref}
11    className={cn(
12      'relative flex h-10 w-10 shrink-0 overflow-hidden border-3 border-foreground shadow-[4px_4px_0px_hsl(var(--shadow-color))] transition duration-200 hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-none',
13      className
14    )}
15    {...props}
16  />
17))
18Avatar.displayName = AvatarPrimitive.Root.displayName
19 
20const AvatarImage = React.forwardRef<
21  React.ElementRef<typeof AvatarPrimitive.Image>,
22  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
23>(({ className, ...props }, ref) => (
24  <AvatarPrimitive.Image
25    ref={ref}
26    className={cn('aspect-square h-full w-full object-cover', className)}
27    {...props}
28  />
29))
30AvatarImage.displayName = AvatarPrimitive.Image.displayName
31 
32const AvatarFallback = React.forwardRef<
33  React.ElementRef<typeof AvatarPrimitive.Fallback>,
34  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
35>(({ className, ...props }, ref) => (
36  <AvatarPrimitive.Fallback
37    ref={ref}
38    className={cn(
39      'flex h-full w-full items-center justify-center bg-primary text-primary-foreground font-bold uppercase',
40      className
41    )}
42    {...props}
43  />
44))
45AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
46 
47export { Avatar, AvatarImage, AvatarFallback }