← back to Trademarks Copyright

src/components/NewsFeed.tsx

35 lines

"use client";
import { useEffect, useState } from "react";

type N = { title: string; link: string; pubDate: string; source: string };

export default function NewsFeed({ query }: { query: string }) {
  const [items, setItems] = useState<N[]>([]);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    setLoading(true);
    fetch(`/api/news?q=${encodeURIComponent(query)}`)
      .then((r) => r.json())
      .then((j) => setItems(j.items || []))
      .finally(() => setLoading(false));
  }, [query]);

  if (loading) return <div className="text-sm text-ink/50">Loading news…</div>;
  if (!items.length) return <div className="text-sm text-ink/50">No recent news.</div>;

  return (
    <ul className="space-y-2 text-sm">
      {items.map((n, i) => (
        <li key={i} className="border-b border-ink/5 pb-2 last:border-0">
          <a href={n.link} target="_blank" rel="noreferrer" className="font-medium text-ink hover:text-brass">
            {n.title}
          </a>
          <div className="text-xs text-ink/50">
            {n.source} · {n.pubDate ? new Date(n.pubDate).toLocaleDateString() : ""}
          </div>
        </li>
      ))}
    </ul>
  );
}