Glass Avatar

1"use client"
2 
3import * as React from "react"
4import { Avatar as AvatarPrimitive } from 'radix-ui'
5import { cn } from "@/lib/utils"
6 
7const GlassAvatar = React.forwardRef<
8  React.ElementRef<typeof AvatarPrimitive.Root>,
9  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> & {
10    glowEffect?: boolean
11  }
12>(({ className, glowEffect = true, ...props }, ref) => (
13  <div className="relative">
14    {glowEffect && (
15      <div className="absolute -inset-1 rounded-full bg-linear-to-r from-cyan-500/40 via-blue-500/40 to-purple-500/40 blur-md opacity-70" />
16    )}
17    <AvatarPrimitive.Root
18      ref={ref}
19      className={cn(
20        "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
21        "border-2 border-white/30 shadow-[0_4px_16px_rgba(0,0,0,0.2)]",
22        className,
23      )}
24      {...props}
25    />
26  </div>
27))
28GlassAvatar.displayName = AvatarPrimitive.Root.displayName
29 
30const GlassAvatarImage = React.forwardRef<
31  React.ElementRef<typeof AvatarPrimitive.Image>,
32  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
33>(({ className, ...props }, ref) => (
34  <AvatarPrimitive.Image ref={ref} className={cn("aspect-square h-full w-full", className)} {...props} />
35))
36GlassAvatarImage.displayName = AvatarPrimitive.Image.displayName
37 
38const GlassAvatarFallback = React.forwardRef<
39  React.ElementRef<typeof AvatarPrimitive.Fallback>,
40  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
41>(({ className, ...props }, ref) => (
42  <AvatarPrimitive.Fallback
43    ref={ref}
44    className={cn(
45      "flex h-full w-full items-center justify-center rounded-full",
46      "bg-white/10 backdrop-blur-xl text-white/80 text-sm font-medium",
47      className,
48    )}
49    {...props}
50  />
51))
52GlassAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
53 
54export { GlassAvatar, GlassAvatarImage, GlassAvatarFallback }