Avatar

1'use client';
2 
3import { Fallback, Image, Root } from '@radix-ui/react-avatar';
4import { cn } from '@/lib/classnames';
5import type { ComponentProps } from 'react';
6 
7const AvatarRoot = ({ className, ...props }: ComponentProps<typeof Root>) => {
8  return (
9    <Root
10      className={cn(
11        'relative flex size-8 shrink-0 overflow-hidden rounded-full',
12        className,
13      )}
14      data-slot='avatar'
15      {...props}
16    />
17  );
18};
19 
20const AvatarImage = ({ className, ...props }: ComponentProps<typeof Image>) => {
21  return (
22    <Image
23      className={cn('aspect-square size-full', className)}
24      data-slot='avatar-image'
25      {...props}
26    />
27  );
28};
29 
30const AvatarFallback = ({
31  className,
32  ...props
33}: ComponentProps<typeof Fallback>) => {
34  return (
35    <Fallback
36      className={cn(
37        'flex size-full items-center justify-center rounded-full bg-muted',
38        className,
39      )}
40      data-slot='avatar-fallback'
41      {...props}
42    />
43  );
44};
45 
46const Avatar = Object.assign(AvatarRoot, {
47  Image: AvatarImage,
48  Fallback: AvatarFallback,
49});
50 
51export { Avatar };