website refactor

apps/website/ui/ProtestCardWrapper.tsx

@@ -0,0 +1,58 @@
+
+
+import { routes } from '@/lib/routing/RouteConfig';
+import { ProtestListItem } from '@/ui/ProtestListItem';
+
+interface Protest {
+  id: string;
+  status: string;
+  protestingDriverId: string;
+  accusedDriverId: string;
+  filedAt: string;
+  incident: {
+    lap: number;
+    description: string;
+  };
+  proofVideoUrl?: string;
+  decisionNotes?: string;
+}
+
+interface Driver {
+  id: string;
+  name: string;
+}
+
+interface ProtestCardProps {
+  protest: Protest;
+  protester?: Driver;
+  accused?: Driver;
+  isAdmin: boolean;
+  onReview: (id: string) => void;
+  formatDate: (date: string) => string;
+}
+
+export function ProtestCard({ protest, protester, accused, isAdmin, onReview, formatDate }: ProtestCardProps) {
+  const daysSinceFiled = Math.floor(
+    (Date.now() - new Date(protest.filedAt).getTime()) / (1000 * 60 * 60 * 24)
+  );
+  const isUrgent = daysSinceFiled > 2 && protest.status === 'pending';
+
+  return (
+    <ProtestListItem
+      protesterName={protester?.name || 'Unknown'}
+      protesterHref={routes.driver.detail(protest.protestingDriverId)}
+      accusedName={accused?.name || 'Unknown'}
+      accusedHref={routes.driver.detail(protest.accusedDriverId)}
+      status={protest.status}
+      isUrgent={isUrgent}
+      daysOld={daysSinceFiled}
+      lap={protest.incident.lap}
+      filedAtLabel={formatDate(protest.filedAt)}
+      description={protest.incident.description}
+      proofVideoUrl={protest.proofVideoUrl}
+      decisionNotes={protest.decisionNotes}
+      isAdmin={isAdmin}
+      onReview={() => onReview(protest.id)}
+    />
+  );
+}