feat: add feed

2026-06-14 00:18:31 +05:30
parent eb0c981d3c
commit 61581b67a7
9 changed files with 395 additions and 47 deletions
@@ -0,0 +1,59 @@
+"use client";
+
+/**
+ * NewUsersStrip — the "new on the platform" discovery row shown at the very
+ * end of the home feed. Up to 5 accounts that joined in the last 24h; each
+ * avatar links to the user's profile. Renders nothing when the list is empty
+ * (the feed simply ends).
+ */
+
+import Link from "next/link";
+import { Sparkles } from "lucide-react";
+import type { UserSummary } from "@/lib/social";
+import { UserAvatar } from "@/components/ui/user-avatar";
+
+export function NewUsersStrip({ users }: { users: UserSummary[] }) {
+  if (users.length === 0) return null;
+  return (
+    <section className="mt-2 rounded-xl bg-card ring-1 ring-foreground/10 p-5">
+      <div className="mb-4 flex items-center gap-2.5">
+        <span
+          aria-hidden
+          className="inline-flex size-8 items-center justify-center rounded-full bg-primary/10 text-primary shrink-0"
+        >
+          <Sparkles className="size-4" />
+        </span>
+        <div className="min-w-0">
+          <h2 className="text-sm font-semibold text-foreground">
+            New to Prabhupāda Says
+          </h2>
+          <p className="text-xs text-muted-foreground">
+            Welcome them — follow the devotees who just joined.
+          </p>
+        </div>
+      </div>
+      <ul className="flex flex-wrap gap-4">
+        {users.map((u) => (
+          <li key={u.handle}>
+            <Link
+              href={`/u/${u.handle}`}
+              className="group flex w-20 flex-col items-center gap-1.5 text-center"
+            >
+              <UserAvatar
+                src={u.avatar_url}
+                name={u.name}
+                className="size-14 group-hover:ring-foreground/30 transition"
+              />
+              <span className="block w-full truncate text-xs font-medium text-foreground">
+                {u.name}
+              </span>
+              <span className="-mt-1 block w-full truncate text-[11px] text-muted-foreground">
+                @{u.handle}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}