Avatar (Tailwind)

1"use client";
2 
3import { Avatar } from "@base-ui/react/avatar";
4import { cn } from "@/lib/utils";
5 
6function AvatarRoot({ className, ...props }: Avatar.Root.Props) {
7  return (
8    <Avatar.Root
9      className={cn(
10        "relative inline-flex h-10 w-10 select-none items-center justify-center overflow-hidden rounded-full bg-muted align-middle",
11        className
12      )}
13      data-slot="avatar-root"
14      {...props}
15    />
16  );
17}
18 
19function AvatarImage({ className, ...props }: Avatar.Image.Props) {
20  return (
21    <Avatar.Image
22      className={cn("h-full w-full rounded-[inherit] object-cover", className)}
23      data-slot="avatar-image"
24      {...props}
25    />
26  );
27}
28 
29function AvatarFallback({ className, ...props }: Avatar.Fallback.Props) {
30  return (
31    <Avatar.Fallback
32      className={cn(
33        "flex h-full w-full items-center justify-center rounded-[inherit] bg-muted font-medium text-muted-foreground text-sm uppercase",
34        className
35      )}
36      data-slot="avatar-fallback"
37      {...props}
38    />
39  );
40}
41 
42export { AvatarRoot as Avatar, AvatarFallback, AvatarImage };