Avatar

1"use client";
2 
3import "./avatar.css";
4import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { AvatarContext, useAvatarContext } from "./avatar.context";
9import { avatarVariants, type AvatarVariants } from "./avatar.variants";
10 
11export type AvatarProps = AvatarVariants & React.ComponentProps<typeof BaseAvatar.Root>;
12 
13export const AvatarRoot = ({ children, className, shape, size, ...props }: AvatarProps) => {
14  const slots = avatarVariants({ shape, size });
15 
16  return (
17    <AvatarContext.Provider value={{ slots }}>
18      <BaseAvatar.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseAvatar.Root>
21    </AvatarContext.Provider>
22  );
23};
24 
25export type AvatarImageProps = React.ComponentProps<typeof BaseAvatar.Image>;
26 
27export const AvatarImage = ({ className, ...props }: AvatarImageProps) => {
28  const { slots } = useAvatarContext();
29  return <BaseAvatar.Image className={cn(slots.image(), className)} {...props} />;
30};
31 
32export type AvatarFallbackProps = React.ComponentProps<typeof BaseAvatar.Fallback>;
33 
34export const AvatarFallback = ({ className, ...props }: AvatarFallbackProps) => {
35  const { slots } = useAvatarContext();
36  return <BaseAvatar.Fallback className={cn(slots.fallback(), className)} {...props} />;
37};