avatar

1import * as React from "react"
2import { Slot } from "@radix-ui/react-slot"
3import { cva, type VariantProps } from "class-variance-authority"
4import { Plus, User } from "lucide-react"
5 
6import { cn } from "@/lib/utils"
7import "./avatar.css"
8 
9/* ------------------------------------------------------------------ */
10/*  CVA                                                                */
11/* ------------------------------------------------------------------ */
12 
13const avatarVariants = cva(
14  "avatar relative inline-flex items-center justify-center shrink-0 rounded-[var(--layout-radius-full)]",
15  {
16    variants: {
17      size: {
18        xs: "h-[var(--layout-size-md)] w-[var(--layout-size-md)]",
19        sm: "h-[var(--layout-size-lg)] w-[var(--layout-size-lg)]",
20        md: "h-[var(--layout-size-xl)] w-[var(--layout-size-xl)]",
21        lg: "h-[var(--layout-size-2xl)] w-[var(--layout-size-2xl)]",
22        xl: "h-[var(--layout-size-3xl)] w-[var(--layout-size-3xl)]",
23      },
24    },
25    defaultVariants: {
26      size: "md",
27    },
28  }
29)
30 
31const avatarStatusVariants = cva(
32  "avatar-status absolute bottom-0 right-0 rounded-[var(--layout-radius-full)]",
33  {
34    variants: {
35      size: {
36        xs: "size-1.5",
37        sm: "size-2",
38        md: "size-2.5",
39        lg: "size-3",
40        xl: "size-3.5",
41      },
42    },
43    defaultVariants: {
44      size: "md",
45    },
46  }
47)
48 
49const avatarAddButtonVariants = cva(
50  "avatar-add-button inline-flex items-center justify-center shrink-0 rounded-[var(--layout-radius-full)] p-[var(--layout-padding-xs)] cursor-pointer",
51  {
52    variants: {
53      size: {
54        xs: "h-[var(--layout-size-md)] w-[var(--layout-size-md)] [&_svg]:size-3",
55        sm: "h-[var(--layout-size-lg)] w-[var(--layout-size-lg)] [&_svg]:h-[var(--layout-size-xs)] [&_svg]:w-[var(--layout-size-xs)]",
56        md: "h-[var(--layout-size-xl)] w-[var(--layout-size-xl)] [&_svg]:h-[var(--layout-size-sm)] [&_svg]:w-[var(--layout-size-sm)]",
57      },
58    },
59    defaultVariants: {
60      size: "sm",
61    },
62  }
63)
64 
65/* ------------------------------------------------------------------ */
66/*  Avatar                                                             */
67/* ------------------------------------------------------------------ */
68 
69function Avatar({
70  className,
71  size = "md",
72  src,
73  alt = "",
74  initials,
75  status,
76  companySrc,
77  children,
78  ref,
79  ...props
80}: React.ComponentProps<"div"> &
81  VariantProps<typeof avatarVariants> & {
82    src?: string
83    alt?: string
84// … truncated