112 lines
4.0 KiB
TypeScript
112 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
/**
|
|
* NewUsersStrip — the "new on the platform" discovery row at the top of the
|
|
* home feed. Up to 5 accounts that joined in the last 24h, each rendered as a
|
|
* card tile. The row scrolls horizontally (native touch/trackpad swipe + a
|
|
* mouse drag-to-scroll affordance) and bleeds to the section's edges with a
|
|
* gutter so tiles peek in from the sides. Renders nothing when empty.
|
|
*/
|
|
|
|
import { useRef } from "react";
|
|
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[] }) {
|
|
const scrollRef = useRef<HTMLDivElement>(null);
|
|
// Mouse drag-to-scroll. Touch/trackpad use native overflow scrolling, so we
|
|
// only engage for mouse; `moved` suppresses the click that would otherwise
|
|
// fire after a drag (and navigate to a profile).
|
|
const drag = useRef({ down: false, startX: 0, startScroll: 0, moved: false });
|
|
|
|
if (users.length === 0) return null;
|
|
|
|
function onPointerDown(e: React.PointerEvent) {
|
|
if (e.pointerType !== "mouse") return;
|
|
const el = scrollRef.current;
|
|
if (!el) return;
|
|
drag.current = {
|
|
down: true,
|
|
startX: e.clientX,
|
|
startScroll: el.scrollLeft,
|
|
moved: false,
|
|
};
|
|
el.setPointerCapture(e.pointerId);
|
|
}
|
|
function onPointerMove(e: React.PointerEvent) {
|
|
if (!drag.current.down) return;
|
|
const el = scrollRef.current;
|
|
if (!el) return;
|
|
const dx = e.clientX - drag.current.startX;
|
|
if (Math.abs(dx) > 4) drag.current.moved = true;
|
|
el.scrollLeft = drag.current.startScroll - dx;
|
|
}
|
|
function onPointerUp(e: React.PointerEvent) {
|
|
if (!drag.current.down) return;
|
|
drag.current.down = false;
|
|
scrollRef.current?.releasePointerCapture(e.pointerId);
|
|
}
|
|
function onClickCapture(e: React.MouseEvent) {
|
|
if (drag.current.moved) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-xl">
|
|
<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 by sending a follow request.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bleed to the section edges (-mx-5) but keep a px-5 gutter so the
|
|
first/last tiles have breathing room as they scroll past. */}
|
|
<div
|
|
ref={scrollRef}
|
|
onPointerDown={onPointerDown}
|
|
onPointerMove={onPointerMove}
|
|
onPointerUp={onPointerUp}
|
|
onPointerCancel={onPointerUp}
|
|
onClickCapture={onClickCapture}
|
|
className="-mx-5 flex gap-3 overflow-x-auto px-5 py-1 snap-x scroll-px-5 cursor-grab active:cursor-grabbing [scrollbar-width:none] [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
|
|
>
|
|
{users.map((u) => (
|
|
<Link
|
|
key={u.handle}
|
|
href={`/u/${u.handle}`}
|
|
draggable={false}
|
|
className="group snap-start shrink-0 w-32 flex flex-col items-center gap-2 rounded-xl bg-card ring-1 ring-foreground/10 px-3 py-4 text-center transition hover:ring-foreground/25 hover:bg-muted/40"
|
|
>
|
|
<UserAvatar
|
|
src={u.avatar_url}
|
|
name={u.name}
|
|
className="size-16 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>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|