chore: code refactor

2026-06-13 02:24:42 +05:30
parent cc5633c37a
commit 439664a97d
151 changed files with 1387 additions and 1138 deletions
@@ -0,0 +1,101 @@
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+/**
+ * UserAvatar — the one avatar component: shows the user's image, or their
+ * initials on a tinted disc when there's no image. Used everywhere a user
+ * thumbnail appears (notification feed, comments, follower lists, and the
+ * profile header's large zoomable hero).
+ *
+ * Sizing is class-driven (`className`) rather than a fixed px, so callers get
+ * Tailwind's responsive sizes — e.g. `size-10` for a list row or
+ * `size-24 sm:size-28` for the profile header. `textClassName` scales the
+ * initials to match. When `onClick` is set, an image avatar becomes a
+ * focusable button (used by the profile header to open its zoom preview);
+ * `interactive` adds a hover-ring affordance.
+ */
+export function UserAvatar({
+  src,
+  name,
+  className,
+  textClassName = "text-sm",
+  onClick,
+  ariaLabel,
+  interactive = false,
+}: {
+  src?: string | null;
+  name: string;
+  /** Box size + extras. Defaults to a 40px (size-10) circle. */
+  className?: string;
+  /** Initials font size — match it to the box. Defaults to text-sm. */
+  textClassName?: string;
+  /** When set, an image avatar renders as a focusable button (e.g. to open a
+   *  zoom preview or navigate). Initials stay non-interactive. */
+  onClick?: () => void;
+  ariaLabel?: string;
+  /** Add a hover-ring affordance to an image avatar. */
+  interactive?: boolean;
+}) {
+  const size = className ?? "size-10";
+
+  if (src) {
+    const imgRing = cn(
+      "rounded-full object-cover ring-1 ring-foreground/10",
+      interactive && "hover:ring-foreground/30 transition",
+    );
+    // width/height satisfy next/image; the rendered size comes from the CSS
+    // size class (which overrides the intrinsic attributes).
+    if (onClick) {
+      return (
+        <button
+          type="button"
+          onClick={onClick}
+          aria-label={ariaLabel ?? `View ${name}'s picture`}
+          className={cn(
+            "shrink-0 rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            size,
+          )}
+        >
+          <Image
+            src={src}
+            alt={name}
+            width={112}
+            height={112}
+            className={cn("size-full", imgRing)}
+            unoptimized
+          />
+        </button>
+      );
+    }
+    return (
+      <Image
+        src={src}
+        alt={name}
+        width={112}
+        height={112}
+        className={cn("shrink-0", size, imgRing)}
+        unoptimized
+      />
+    );
+  }
+
+  const initials =
+    name
+      .replace(/^@/, "")
+      .split(/\s+/)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?";
+  return (
+    <div
+      className={cn(
+        "shrink-0 rounded-full bg-primary/15 text-primary flex items-center justify-center font-semibold ring-1 ring-foreground/10",
+        size,
+        textClassName,
+      )}
+    >
+      {initials}
+    </div>
+  );
+}