Feed stream

import { useEffect, useState } from "react"
import { Avatar } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import { FeedStream } from "@/components/ui/feed-stream"

type Activity = { id: string; who: string; text: string; when: string };

const actions = ["approved INV-2041", "commented on the Ostra deal", "matched 12 payments", "invited a teammate", "closed September", "exported the ledger", "changed a rule"];

const names = ["Amara Okafor", "Tomás Ferreira", "Priya Raman", "Kiara Murayama", "Rafael Abreu"];

export function FeedStreamDemo() {
  const [items, setItems] = useState<Activity[]>(() => Array.from({ length: 8 }, (_, index) => ({ id: `a${index}`, who: names[index % names.length]!, text: actions[index % actions.length]!, when: `${(index + 1) * 4} min ago` })));
  const [live, setLive] = useState(true);
  useEffect(() => {
    if (!live) return;
    let n = 100;
    const id = setInterval(() => {
      n += 1;
      setItems((current) => [{ id: `a${n}`, who: names[n % names.length]!, text: actions[n % actions.length]!, when: "just now" }, ...current].slice(0, 40));
    }, 2200);
    return () => clearInterval(id);
  }, [live]);
  return (
    <div className="grid w-full max-w-md gap-3">
      <FeedStream
        label="Activity"
        height={320}
        items={items}
        getKey={(item) => item.id}
        renderItem={(item) => (
          <div className="flex items-center gap-3 px-4 py-3">
            <Avatar name={item.who} className="size-7 rounded-[8px] text-[11px]" />
            <span className="min-w-0 flex-1 text-sm"><span className="font-medium">{item.who}</span> {item.text}</span>
            <span className="text-xs whitespace-nowrap text-muted-foreground">{item.when}</span>
          </div>
        )}
      />
      <Button size="sm" variant="secondary" className="w-fit" onClick={() => setLive((value) => !value)}>{live ? "Pause the feed" : "Resume the feed"}</Button>
    </div>
  );
}