Initial commit

frontend/app/members/[id]/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { use } from "react";
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { useMember, useMemberBills } from "@/lib/hooks/useMembers";
+import { FollowButton } from "@/components/shared/FollowButton";
+import { BillCard } from "@/components/shared/BillCard";
+import { cn, partyBadgeColor } from "@/lib/utils";
+
+export default function MemberDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const { data: member, isLoading } = useMember(id);
+  const { data: billsData } = useMemberBills(id);
+
+  if (isLoading) return <div className="text-center py-20 text-muted-foreground">Loading...</div>;
+  if (!member) return <div className="text-center py-20 text-muted-foreground">Member not found.</div>;
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-start justify-between">
+        <div className="flex items-start gap-4">
+          <Link href="/members" className="mt-1 text-muted-foreground hover:text-foreground">
+            <ArrowLeft className="w-4 h-4" />
+          </Link>
+          <div>
+            <h1 className="text-2xl font-bold">{member.name}</h1>
+            <div className="flex items-center gap-2 mt-1">
+              {member.party && (
+                <span className={cn("px-2 py-0.5 rounded text-xs font-medium", partyBadgeColor(member.party))}>
+                  {member.party}
+                </span>
+              )}
+              {member.state && <span className="text-sm text-muted-foreground">{member.state}</span>}
+              {member.chamber && <span className="text-sm text-muted-foreground">{member.chamber}</span>}
+              {member.district && <span className="text-sm text-muted-foreground">District {member.district}</span>}
+            </div>
+          </div>
+        </div>
+        <FollowButton type="member" value={member.bioguide_id} />
+      </div>
+
+      <div>
+        <h2 className="font-semibold mb-4">Sponsored Bills ({billsData?.total ?? 0})</h2>
+        {!billsData?.items?.length ? (
+          <p className="text-sm text-muted-foreground">No bills found.</p>
+        ) : (
+          <div className="space-y-3">
+            {billsData.items.map((bill) => <BillCard key={bill.bill_id} bill={bill} />)}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}