202 lines · 6.2 KB
import { cn } from "~/utils/cn";
import type { StatusState } from "~/lib/types";

const AVATAR_COLORS = [
  "bg-orange-700",
  "bg-sky-700",
  "bg-emerald-700",
  "bg-rose-700",
  "bg-violet-700",
  "bg-amber-700",
  "bg-teal-700",
  "bg-fuchsia-700",
];
const SECONDS = 1000;
const MINUTE = 60 * SECONDS;
const HOUR = 60 * MINUTE;
const DAY = 24 * HOUR;
const MONTH = 30 * DAY;
const YEAR = 365 * DAY;
const KB = 1024;

function hash(value: string): number {
  let out = 0;
  for (const char of value) out = (out * 31 + char.charCodeAt(0)) | 0;
  return Math.abs(out);
}

export function Avatar({ name, size = "md" }: { name: string; size?: "sm" | "md" | "lg" }) {
  const sizeClass = size === "sm" ? "size-5 text-[10px]" : size === "lg" ? "size-20 text-3xl" : "size-8 text-sm";
  return (
    <span
      aria-hidden
      className={cn(
        "inline-flex shrink-0 items-center justify-center rounded-md font-mono font-medium text-white uppercase",
        AVATAR_COLORS[hash(name) % AVATAR_COLORS.length],
        sizeClass,
      )}
    >
      {name.slice(0, 1)}
    </span>