Initial commit

frontend/components/bills/NewsPanel.tsx

@@ -0,0 +1,46 @@
+import { ExternalLink, Newspaper } from "lucide-react";
+import { NewsArticle } from "@/lib/types";
+import { formatDate } from "@/lib/utils";
+
+interface NewsPanelProps {
+  articles?: NewsArticle[];
+}
+
+export function NewsPanel({ articles }: NewsPanelProps) {
+  return (
+    <div className="bg-card border border-border rounded-lg p-4">
+      <h3 className="font-semibold text-sm flex items-center gap-2 mb-3">
+        <Newspaper className="w-4 h-4" />
+        Related News
+        {articles && articles.length > 0 && (
+          <span className="text-xs text-muted-foreground font-normal">({articles.length})</span>
+        )}
+      </h3>
+
+      {!articles || articles.length === 0 ? (
+        <p className="text-xs text-muted-foreground italic">No news articles found yet.</p>
+      ) : (
+        <ul className="space-y-3">
+          {articles.slice(0, 8).map((article) => (
+            <li key={article.id} className="group">
+              <a
+                href={article.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block hover:text-primary transition-colors"
+              >
+                <p className="text-xs font-medium line-clamp-2 leading-snug group-hover:underline">
+                  {article.headline}
+                  <ExternalLink className="w-3 h-3 inline ml-1 opacity-50" />
+                </p>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  {article.source} · {formatDate(article.published_at)}
+                </p>
+              </a>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}