feat: add user centric features

2026-05-30 23:44:08 +05:30
parent 7bd2952caa
commit dcdd2383c6
63 changed files with 16783 additions and 1735 deletions
@@ -0,0 +1,71 @@
+"use client";
+
+/**
+ * ProfileViewHeader — the read-only header used in view mode on /u/me.
+ * Mirrors the shape of /u/[handle]'s top block so the owner sees the same
+ * thing visitors do, plus an action slot for an "Edit profile" button.
+ */
+
+import Image from "next/image";
+import type { User } from "@/lib/auth";
+
+export function ProfileViewHeader({
+  user,
+  postCount,
+  actionSlot,
+}: {
+  user: User;
+  postCount: number;
+  actionSlot?: React.ReactNode;
+}) {
+  return (
+    <header className="flex flex-col sm:flex-row sm:items-center gap-5 sm:gap-6">
+      <Avatar src={user.avatar_url} name={user.name} />
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <h1 className="font-[family-name:var(--font-title)] font-semibold text-2xl sm:text-3xl text-foreground leading-tight truncate">
+              {user.name}
+            </h1>
+            <p className="text-sm text-muted-foreground mt-0.5">
+              @{user.handle} ·{" "}
+              <span className="tabular-nums">{postCount}</span> post
+              {postCount === 1 ? "" : "s"}
+            </p>
+            <p className="text-xs text-muted-foreground mt-1">
+              Joined {new Date(user.created_at).toLocaleDateString()}
+            </p>
+          </div>
+          {actionSlot ? <div className="shrink-0">{actionSlot}</div> : null}
+        </div>
+      </div>
+    </header>
+  );
+}
+
+function Avatar({ src, name }: { src: string | null; name: string }) {
+  if (src) {
+    return (
+      <Image
+        src={src}
+        alt={name}
+        width={88}
+        height={88}
+        className="size-20 sm:size-22 rounded-full object-cover ring-1 ring-foreground/10"
+        unoptimized
+      />
+    );
+  }
+  const initials =
+    name
+      .split(/\s+/)
+      .map((p) => p[0])
+      .slice(0, 2)
+      .join("")
+      .toUpperCase() || "?";
+  return (
+    <div className="size-20 sm:size-22 rounded-full bg-primary/15 text-primary flex items-center justify-center text-2xl font-semibold ring-1 ring-foreground/10">
+      {initials}
+    </div>
+  );
+}