56 lines
2.3 KiB
TypeScript
56 lines
2.3 KiB
TypeScript
"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>
|
|
);
|
|
}
|