Avatar

1"use client"
2
3import * as React from "react"
4import * as AvatarPrimitive from "@radix-ui/react-avatar"
5import { cva, type VariantProps } from "class-variance-authority"
6
7import { cn } from "@/lib/utils"
8import { useFyskConfig } from "@/components/fysk-provider"
9
10const avatarVariants = cva(
11    "relative flex shrink-0 overflow-hidden rounded-full transition-all duration-150 active:scale-[0.98]",
12    {
13        variants: {
14            size: {
15                xs: "h-7 w-7 text-[10px]",
16                sm: "h-8 w-8 text-xs",
17                md: "h-9 w-9 text-xs",
18                lg: "h-10 w-10 text-sm",
19                xl: "h-12 w-12 text-base",
20                "2xl": "h-16 w-16 text-xl",
21            },
22            variant: {
23                default: "border border-border",
24                outline: "border-2 border-border bg-transparent",
25                ghost: "border-none bg-transparent",
26                glass: "bg-foreground/5 backdrop-blur-md border border-border/50 shadow-xs",
27            }
28        },
29        defaultVariants: {
30            size: "md",
31            variant: "default",
32        },
33    }
34)
35
36export interface AvatarProps
37    extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
38    VariantProps<typeof avatarVariants> {
39    src?: string
40    alt?: string
41    fallback?: React.ReactNode
42    state?: "idle" | "loading" | "error"
43    iconLoading?: React.ReactNode
44    iconError?: React.ReactNode
45}
46
47const Avatar = React.forwardRef<
48    React.ComponentRef<typeof AvatarPrimitive.Root>,
49    AvatarProps
50>(({ className, src, alt, fallback, size, variant, state = "idle", iconLoading: propIconLoading, iconError: propIconError, ...props }, ref) => {
51    const config = useFyskConfig()
52
53    const isLoading = state === "loading"
54    const isError = state === "error"
55
56    const finalIconLoading = propIconLoading || config.icons?.loading
57    const finalIconError = propIconError || config.icons?.error
58
59    const getInitials = (name?: string) => {
60        if (!name) return "FY"
61        return name
62            .split(" ")
63            .map((n) => n[0])
64            .join("")
65            .toUpperCase()
66            .slice(0, 2)
67    }
68
69    return (
70        <AvatarPrimitive.Root
71            ref={ref}
72            className={cn(avatarVariants({ size, variant, className }))}
73            {...props}
74        >
75            <AvatarPrimitive.Image
76                src={src}
77// … truncated