Avatar

1"use client"
2 
3import * as React from "react"
4import { Avatar as AvatarBase } from "@base-ui/react/avatar"
5import { cva, VariantProps } from "class-variance-authority"
6 
7import { cn } from "@/lib/utils"
8 
9const avatarVariants = cva(
10	"relative flex shrink-0 overflow-hidden rounded-full",
11	{
12		variants: {
13			size: {
14				sm: "size-8 text-sm",
15				md: "size-10",
16				lg: "size-12 text-lg",
17			},
18		},
19		defaultVariants: {
20			size: "md",
21		},
22	}
23)
24 
25function Avatar({
26	className,
27	size,
28	...props
29}: React.ComponentProps<typeof AvatarBase.Root> &
30	VariantProps<typeof avatarVariants>) {
31	return (
32		<AvatarBase.Root
33			data-slot="avatar"
34			className={cn(avatarVariants({ size }), className)}
35			{...props}
36		/>
37	)
38}
39 
40function AvatarImage({
41	className,
42	...props
43}: React.ComponentProps<typeof AvatarBase.Image>) {
44	return (
45		<AvatarBase.Image
46			data-slot="avatar-image"
47			className={cn("size-full object-cover", className)}
48			{...props}
49		/>
50	)
51}
52 
53function AvatarFallback({
54	className,
55	...props
56}: React.ComponentProps<typeof AvatarBase.Fallback>) {
57	return (
58		<AvatarBase.Fallback
59			data-slot="avatar-fallback"
60			className={cn(
61				"bg-muted flex size-full items-center justify-center rounded-full select-none",
62				className
63			)}
64			{...props}
65		/>
66	)
67}
68 
69export { Avatar, AvatarImage, AvatarFallback }