website refactor

apps/website/components/races/ImportResultsForm.tsx

@@ -1,17 +1,22 @@
 'use client';
 
-import { useState } from 'react';
-import Button from '../ui/Button';
+import React, { useState } from 'react';
+import { AlertCircle } from 'lucide-react';
 import { useInject } from '@/lib/di/hooks/useInject';
 import { RACE_RESULTS_SERVICE_TOKEN } from '@/lib/di/tokens';
+import { FilePicker } from '@/ui/FilePicker';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { InfoBox } from '@/ui/InfoBox';
 
 interface ImportResultsFormProps {
   raceId: string;
-  onSuccess: (results: any[]) => void;
+  onSuccess: (results: unknown[]) => void;
   onError: (error: string) => void;
 }
 
-export default function ImportResultsForm({ raceId, onSuccess, onError }: ImportResultsFormProps) {
+export function ImportResultsForm({ raceId, onSuccess, onError }: ImportResultsFormProps) {
   const [uploading, setUploading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const raceResultsService = useInject(RACE_RESULTS_SERVICE_TOKEN);
@@ -25,6 +30,7 @@ export default function ImportResultsForm({ raceId, onSuccess, onError }: Import
 
     try {
       const content = await file.text();
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const results = (raceResultsService as any).parseAndTransformCSV(content, raceId);
       onSuccess(results);
     } catch (err) {
@@ -39,54 +45,39 @@ export default function ImportResultsForm({ raceId, onSuccess, onError }: Import
   };
 
   return (
-    <>
-      <div className="space-y-4">
-        <div>
-        <label className="block text-sm font-medium text-gray-400 mb-2">
-          Upload Results CSV
-        </label>
-        <p className="text-xs text-gray-500 mb-3">
-          CSV format: driverId, position, fastestLap, incidents, startPosition
-        </p>
-        
-        <input
-          type="file"
-          accept=".csv"
-          onChange={handleFileChange}
-          disabled={uploading}
-          className="block w-full text-sm text-gray-400
-            file:mr-4 file:py-2 file:px-4
-            file:rounded file:border-0
-            file:text-sm file:font-semibold
-            file:bg-primary-blue file:text-white
-            file:cursor-pointer file:transition-colors
-            hover:file:bg-primary-blue/80
-            disabled:file:opacity-50 disabled:file:cursor-not-allowed"
-        />
-      </div>
+    <Stack gap={4}>
+      <FilePicker
+        label="Upload Results CSV"
+        description="CSV format: driverId, position, fastestLap, incidents, startPosition"
+        accept=".csv"
+        onChange={handleFileChange}
+        disabled={uploading}
+      />
 
       {error && (
-        <div className="p-4 bg-warning-amber/10 border border-warning-amber/30 rounded text-warning-amber text-sm">
-          <strong>Error:</strong> {error}
-        </div>
+        <InfoBox 
+          variant="warning"
+          icon={AlertCircle}
+          title="Error"
+          description={error}
+        />
       )}
 
       {uploading && (
-        <div className="text-center text-gray-400 text-sm">
+        <Text align="center" color="text-gray-400" size="sm">
           Parsing CSV and importing results...
-        </div>
+        </Text>
       )}
 
-      <div className="p-4 bg-iron-gray/20 rounded text-xs text-gray-500">
-        <p className="font-semibold mb-2">CSV Example:</p>
-        <pre className="text-gray-400">
+      <Box p={4} bg="bg-iron-gray/20" rounded="lg">
+        <Text weight="semibold" block mb={2} size="xs" color="text-gray-500">CSV Example:</Text>
+        <Box as="pre" color="text-gray-400">
 {`driverId,position,fastestLap,incidents,startPosition
 550e8400-e29b-41d4-a716-446655440001,1,92.456,0,3
 550e8400-e29b-41d4-a716-446655440002,2,92.789,1,1
 550e8400-e29b-41d4-a716-446655440003,3,93.012,2,2`}
-        </pre>
-        </div>
-      </div>
-    </>
+        </Box>
+      </Box>
+    </Stack>
   );
-}
+}