Initial commit

frontend/components/shared/BillCard.tsx

@@ -0,0 +1,81 @@
+import Link from "next/link";
+import { TrendingUp, Calendar, User } from "lucide-react";
+import { Bill } from "@/lib/types";
+import { billLabel, cn, formatDate, partyBadgeColor, trendColor } from "@/lib/utils";
+import { FollowButton } from "./FollowButton";
+
+interface BillCardProps {
+  bill: Bill;
+  compact?: boolean;
+}
+
+export function BillCard({ bill, compact = false }: BillCardProps) {
+  const label = billLabel(bill.bill_type, bill.bill_number);
+  const score = bill.latest_trend?.composite_score;
+  const tags = bill.latest_brief?.topic_tags?.slice(0, 3) || [];
+
+  return (
+    <div className="bg-card border border-border rounded-lg p-4 hover:border-primary/30 transition-colors">
+      <div className="flex items-start justify-between gap-3">
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center gap-2 mb-1.5 flex-wrap">
+            <span className="text-xs font-mono font-semibold text-muted-foreground bg-muted px-1.5 py-0.5 rounded">
+              {label}
+            </span>
+            <span className="text-xs text-muted-foreground">
+              {bill.chamber}
+            </span>
+            {tags.map((tag) => (
+              <span
+                key={tag}
+                className="text-xs px-1.5 py-0.5 rounded-full bg-accent text-accent-foreground"
+              >
+                {tag}
+              </span>
+            ))}
+          </div>
+
+          <Link href={`/bills/${bill.bill_id}`}>
+            <h3 className="text-sm font-medium leading-snug hover:text-primary transition-colors line-clamp-2">
+              {bill.short_title || bill.title || "Untitled Bill"}
+            </h3>
+          </Link>
+
+          {!compact && bill.sponsor && (
+            <div className="flex items-center gap-1.5 mt-1.5 text-xs text-muted-foreground">
+              <User className="w-3 h-3" />
+              <Link href={`/members/${bill.sponsor.bioguide_id}`} className="hover:text-foreground transition-colors">
+                {bill.sponsor.name}
+              </Link>
+              {bill.sponsor.party && (
+                <span className={cn("px-1 py-0.5 rounded text-xs font-medium", partyBadgeColor(bill.sponsor.party))}>
+                  {bill.sponsor.party}
+                </span>
+              )}
+              {bill.sponsor.state && (
+                <span>{bill.sponsor.state}</span>
+              )}
+            </div>
+          )}
+        </div>
+
+        <div className="flex flex-col items-end gap-2 shrink-0">
+          <FollowButton type="bill" value={bill.bill_id} />
+          {score !== undefined && score > 0 && (
+            <div className={cn("flex items-center gap-1 text-xs font-medium", trendColor(score))}>
+              <TrendingUp className="w-3 h-3" />
+              {Math.round(score)}
+            </div>
+          )}
+        </div>
+      </div>
+
+      {!compact && bill.latest_action_text && (
+        <p className="mt-2 text-xs text-muted-foreground line-clamp-2 border-t border-border pt-2">
+          <Calendar className="w-3 h-3 inline mr-1" />
+          {formatDate(bill.latest_action_date)} — {bill.latest_action_text}
+        </p>
+      )}
+    </div>
+  );
+}