60 lines
2.0 KiB
TypeScript
60 lines
2.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|