48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { Clock } from "lucide-react";
|
|
import { BillAction } from "@/lib/types";
|
|
import { formatDate } from "@/lib/utils";
|
|
|
|
interface ActionTimelineProps {
|
|
actions: BillAction[];
|
|
}
|
|
|
|
export function ActionTimeline({ actions }: ActionTimelineProps) {
|
|
if (!actions || actions.length === 0) {
|
|
return (
|
|
<div className="bg-card border border-border rounded-lg p-6">
|
|
<h2 className="font-semibold mb-3 flex items-center gap-2">
|
|
<Clock className="w-4 h-4" />
|
|
Action History
|
|
</h2>
|
|
<p className="text-sm text-muted-foreground italic">No actions recorded yet.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-card border border-border rounded-lg p-6">
|
|
<h2 className="font-semibold mb-4 flex items-center gap-2">
|
|
<Clock className="w-4 h-4" />
|
|
Action History
|
|
<span className="text-xs text-muted-foreground font-normal">({actions.length})</span>
|
|
</h2>
|
|
|
|
<div className="relative">
|
|
<div className="absolute left-2 top-0 bottom-0 w-px bg-border" />
|
|
<ul className="space-y-4 pl-7">
|
|
{actions.map((action, i) => (
|
|
<li key={action.id} className="relative">
|
|
<div className="absolute -left-5 top-1.5 w-2 h-2 rounded-full bg-primary/60 border-2 border-background" />
|
|
<div className="text-xs text-muted-foreground mb-0.5">
|
|
{formatDate(action.action_date)}
|
|
{action.chamber && ` · ${action.chamber}`}
|
|
</div>
|
|
<p className="text-sm leading-snug">{action.action_text}</p>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|