Avatar

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