Avatar

1'use client';
2 
3import * as React from 'react';
4import * as AvatarPrimitive from '@radix-ui/react-avatar';
5import { cn } from '@/lib/utils';
6 
7type AvatarProps = React.ComponentPropsWithoutRef<
8  typeof AvatarPrimitive.Root
9> & {
10  variant?: 'close-friends' | 'normal' | 'none';
11};
12 
13const Avatar = React.forwardRef<
14  React.ComponentRef<typeof AvatarPrimitive.Root>,
15  AvatarProps
16>(({ className, variant = 'none', ...props }, ref) => {
17  const ringClass =
18    variant === 'close-friends'
19      ? 'bg-linear-to-tr from-green-400 to-green-600'
20      : variant === 'normal'
21        ? 'bg-[conic-gradient(at_top_right,#f09433,#e6683c,#dc2743,#cc2366,#bc1888,#f09433)]'
22        : '';
23 
24  return variant === 'none' ? (
25    <AvatarPrimitive.Root
26      ref={ref}
27      className={cn(
28        'relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full',
29        className,
30      )}
31      {...props}
32    />
33  ) : (
34    <div
35      className={cn(
36        'h-14 w-14 rounded-full p-0.5',
37        ringClass,
38        'flex items-center justify-center',
39      )}
40    >
41      <div className='h-full w-full rounded-full bg-black flex items-center justify-center overflow-hidden'>
42        <AvatarPrimitive.Root
43          ref={ref}
44          className={cn(
45            'h-full w-full rounded-full overflow-hidden',
46            className,
47          )}
48          {...props}
49        />
50      </div>
51    </div>
52  );
53});
54Avatar.displayName = AvatarPrimitive.Root.displayName;
55 
56const AvatarImage = React.forwardRef<
57  React.ComponentRef<typeof AvatarPrimitive.Image>,
58  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
59>(({ className, ...props }, ref) => (
60  <AvatarPrimitive.Image
61    ref={ref}
62    className={cn('h-full w-full object-cover not-prose', className)}
63    {...props}
64  />
65));
66AvatarImage.displayName = AvatarPrimitive.Image.displayName;
67 
68const AvatarFallback = React.forwardRef<
69  React.ComponentRef<typeof AvatarPrimitive.Fallback>,
70  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
71>(({ className, ...props }, ref) => (
72  <AvatarPrimitive.Fallback
73    ref={ref}
74    className={cn(
75      'flex h-full w-full items-center justify-center rounded-full bg-muted text-sm font-medium',
76      className,
77    )}
78    {...props}
79  />
80));
81AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
82 
83export { Avatar, AvatarImage, AvatarFallback };