Avatar

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3 
4import { cn } from "@/lib/utils"
5 
6const AVATAR_COLORS = [
7  "#2f7de0",
8  "#58b52f",
9  "#e0742f",
10  "#e02f6b",
11  "#8a56c9",
12  "#1fa8a0",
13  "#7d8694",
14]
15 
16function seededColor(seed: string) {
17  let hash = 0
18  for (let i = 0; i < seed.length; i++) {
19    hash = (hash * 31 + seed.charCodeAt(i)) >>> 0
20  }
21  return AVATAR_COLORS[hash % AVATAR_COLORS.length]
22}
23 
24function gelBackground(color: string) {
25  return `linear-gradient(180deg, color-mix(in oklab, ${color} 38%, white) 0%, color-mix(in oklab, ${color} 90%, white) 50%, color-mix(in oklab, ${color} 85%, black) 51%, color-mix(in oklab, ${color} 62%, white) 100%)`
26}
27 
28const avatarVariants = cva(
29  "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden border border-[#7d828c] bg-[linear-gradient(180deg,var(--aqua-gel-hi,#a8d0f7)_0%,var(--aqua-gel-mid,#4a90ec)_50%,var(--aqua-gel-deep,#2a6fd0)_51%,var(--aqua-gel-light,#6aabf3)_100%)] font-bold uppercase text-white shadow-[inset_0_1px_1px_rgba(255,255,255,0.5),0_1px_2px_rgba(20,30,50,0.25)] [text-shadow:0_-1px_1px_rgba(10,30,70,0.4)] before:pointer-events-none before:absolute before:inset-x-[2px] before:top-[1px] before:z-10 before:h-[45%] before:rounded-t-[inherit] before:bg-[linear-gradient(180deg,rgba(255,255,255,0.75),rgba(255,255,255,0.08))]",
30  {
31    variants: {
32      size: {
33        sm: "size-7 text-[10px]",
34        default: "size-10 text-[13px]",
35        lg: "size-16 text-lg",
36      },
37      shape: {
38        square: "",
39        circle: "rounded-full",
40      },
41    },
42    compoundVariants: [
43      { size: "sm", shape: "square", class: "rounded-[5px]" },
44      { size: "default", shape: "square", class: "rounded-[7px]" },
45      { size: "lg", shape: "square", class: "rounded-[10px]" },
46    ],
47    defaultVariants: {
48      size: "default",
49      shape: "square",
50    },
51  }
52)
53 
54function AvatarSilhouette() {
55  return (
56    <svg
57      viewBox="0 0 24 24"
58      aria-hidden="true"
59      className="absolute -bottom-[8%] left-1/2 h-[88%] w-auto -translate-x-1/2 text-white/90 drop-shadow-[0_1px_1px_rgba(10,30,70,0.35)]"
60      fill="currentColor"
61    >
62      <circle cx="12" cy="8" r="4.6" />
63      <path d="M12 14.2c-4.8 0-8.4 2.8-8.4 7v2.8h16.8v-2.8c0-4.2-3.6-7-8.4-7Z" />
64    </svg>
65  )
66}
67 
68export type AvatarProps = React.ComponentProps<"span"> &
69  VariantProps<typeof avatarVariants> & {
70    src?: string
71    alt?: string
72    initials?: string
73// … truncated