message-inbox-web-frontend-sdk/apps/web/components/ui/primitives.tsx

"use client";

import clsx from "clsx";
import type { PresenceState, User } from "@lynkd/messaging-inbox-sdk";

/* ------------------------------ presence ------------------------------ */

const presenceColor: Record<PresenceState, string> = {
  active: "var(--c-success)",
  away: "var(--c-warning)",
  dnd: "var(--c-danger)",
  offline: "var(--c-dim)",
};

export function PresenceDot({
  state,
  size = 10,
  ring = "var(--c-surface)",
}: {
  state: PresenceState;
  size?: number;
  ring?: string;
}) {
  const filled = state === "active" || state === "dnd";
  return (
    <span
      title={state}
      style={{
        width: size,
        height: size,
        boxShadow: `0 0 0 2px ${ring}`,
        background: filled ? presenceColor[state] : "transparent",
        border: filled ? "none" : `2px solid ${presenceColor[state]}`,
      }}
      className="inline-block rounded-full"
    />
  );
}

/* ------------------------------- avatar ------------------------------- */

export function Avatar({
  user,
  size = 36,
  showPresence = true,
  rounded = "var(--r-control)",
}: {
  user: Pick<User, "avatarText" | "avatarColor" | "presence" | "name"> & { avatarUrl?: string };
  size?: number;
  showPresence?: boolean;
  rounded?: string;
}) {
  return (
    <span className="relative inline-flex shrink-0" style={{ width: size, height: size }}>
      {user.avatarUrl ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={user.avatarUrl}
          alt={user.name}
          className="h-full w-full object-cover"
          style={{ borderRadius: rounded }}
        />
      ) : (
        <span
          className="flex h-full w-full items-center justify-center font-semibold text-white"
          style={{
            background: user.avatarColor ?? "var(--c-elevated)",
            borderRadius: rounded,
            fontSize: size * 0.4,
          }}
        >
          {user.avatarText}
        </span>
      )}
      {showPresence && (
        <span className="absolute -bottom-0.5 -right-0.5">
          <PresenceDot state={user.presence} size={Math.max(9, size * 0.28)} />
        </span>
      )}
    </span>
  );
}

/* ------------------------------- badges ------------------------------- */

export function CountBadge({ count, tone = "accent" }: { count: number; tone?: "accent" | "danger" }) {
  if (!count) return null;
  return (
    <span
      className={clsx(
        "inline-flex min-w-[18px] items-center justify-center rounded-full px-1.5 text-[11px] font-bold leading-[18px]",
        tone === "accent" ? "bg-accent text-accent-fg" : "bg-danger text-white",
      )}
    >
      {count > 99 ? "99+" : count}
    </span>
  );
}

export function Chip({
  children,
  tone = "neutral",
  className,
}: {
  children: React.ReactNode;
  tone?: "neutral" | "accent" | "success" | "warning" | "danger" | "info";
  className?: string;
}) {
  const tones: Record<string, string> = {
    neutral: "bg-hover text-muted",
    accent: "bg-accent-soft text-accent",
    success: "text-success",
    warning: "text-warning",
    danger: "text-danger",
    info: "text-info",
  };
  const bg: Record<string, string> = {
    success: "rgba(62,207,142,0.12)",
    warning: "rgba(245,181,68,0.12)",
    danger: "rgba(242,85,90,0.12)",
    info: "rgba(91,157,255,0.12)",
    neutral: "",
    accent: "",
  };
  return (
    <span
      className={clsx(
        "inline-flex items-center gap-1 rounded-pill px-2 py-0.5 text-[11px] font-semibold uppercase tracking-wide",
        tones[tone],
        className,
      )}
      style={bg[tone] ? { background: bg[tone] } : undefined}
    >
      {children}
    </span>
  );
}

/* ---------------------------- icon button ----------------------------- */

export function IconButton({
  children,
  label,
  active,
  onClick,
  className,
  badge,
}: {
  children: React.ReactNode;
  label: string;
  active?: boolean;
  onClick?: () => void;
  className?: string;
  badge?: number;
}) {
  return (
    <button
      type="button"
      aria-label={label}
      title={label}
      onClick={onClick}
      className={clsx(
        "focus-ring relative grid h-9 w-9 place-items-center rounded-control text-muted transition-colors hover:bg-hover hover:text-ink",
        active && "bg-hover text-ink",
        className,
      )}
    >
      {children}
      {!!badge && (
        <span className="absolute -right-0.5 -top-0.5">
          <CountBadge count={badge} tone="danger" />
        </span>
      )}
    </button>
  );
}

/* ------------------------------ tooltip-ish --------------------------- */

export function SectionLabel({ children }: { children: React.ReactNode }) {
  return (
    <div className="px-3 pb-1 pt-3 text-[11px] font-bold uppercase tracking-[0.08em] text-dim">
      {children}
    </div>
  );
}