first commit

2026-07-17 21:48:37 +05:30
commit f85599dac5
124 changed files with 10775 additions and 0 deletions
@@ -0,0 +1,186 @@
+"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>
+  );
+}