website refactor

apps/website/components/teams/CreateTeamForm.tsx

@@ -1,19 +1,22 @@
 'use client';
 
-import Button from '@/ui/Button';
-import Input from '@/ui/Input';
-import { useEffectiveDriverId } from "@/lib/hooks/useEffectiveDriverId";
-import { useCreateTeam } from "@/lib/hooks/team";
-import { useRouter } from 'next/navigation';
-import { useState } from 'react';
+import React, { useState } from 'react';
+import { Button } from '@/ui/Button';
+import { Input } from '@/ui/Input';
+import { TextArea } from '@/ui/TextArea';
+import { useCreateTeam } from "@/hooks/team/useCreateTeam";
+import { Box } from '@/ui/Box';
+import { Stack } from '@/ui/Stack';
+import { Text } from '@/ui/Text';
+import { InfoBanner } from '@/ui/InfoBanner';
 
 interface CreateTeamFormProps {
   onCancel?: () => void;
   onSuccess?: (teamId: string) => void;
+  onNavigate: (teamId: string) => void;
 }
 
-export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormProps) {
-  const router = useRouter();
+export function CreateTeamForm({ onCancel, onSuccess, onNavigate }: CreateTeamFormProps) {
   const createTeamMutation = useCreateTeam();
   const [formData, setFormData] = useState({
     name: '',
@@ -21,7 +24,6 @@ export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormPr
     description: '',
   });
   const [errors, setErrors] = useState<Record<string, string>>({});
-  const currentDriverId = useEffectiveDriverId();
 
   const validateForm = () => {
     const newErrors: Record<string, string> = {};
@@ -67,7 +69,7 @@ export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormPr
           if (onSuccess) {
             onSuccess(teamId);
           } else {
-            router.push(`/teams/${teamId}`);
+            onNavigate(teamId);
           }
         },
         onError: (error) => {
@@ -78,93 +80,72 @@ export default function CreateTeamForm({ onCancel, onSuccess }: CreateTeamFormPr
   };
 
   return (
-    <form onSubmit={handleSubmit} className="space-y-6">
-      <div>
-        <label className="block text-sm font-medium text-gray-400 mb-2">
-          Team Name *
-        </label>
+    <Box as="form" onSubmit={handleSubmit}>
+      <Stack gap={6}>
         <Input
+          label="Team Name *"
           type="text"
           value={formData.name}
           onChange={(e) => setFormData({ ...formData, name: e.target.value })}
           placeholder="Enter team name..."
           disabled={createTeamMutation.isPending}
+          variant={errors.name ? 'error' : 'default'}
+          errorMessage={errors.name}
         />
-        {errors.name && (
-          <p className="text-danger-red text-xs mt-1">{errors.name}</p>
-        )}
-      </div>
 
-      <div>
-        <label className="block text-sm font-medium text-gray-400 mb-2">
-          Team Tag *
-        </label>
         <Input
+          label="Team Tag *"
           type="text"
           value={formData.tag}
           onChange={(e) => setFormData({ ...formData, tag: e.target.value.toUpperCase() })}
           placeholder="e.g., APEX"
           maxLength={4}
           disabled={createTeamMutation.isPending}
+          variant={errors.tag ? 'error' : 'default'}
+          errorMessage={errors.tag}
         />
-        <p className="text-xs text-gray-500 mt-1">Max 4 characters</p>
-        {errors.tag && (
-          <p className="text-danger-red text-xs mt-1">{errors.tag}</p>
-        )}
-      </div>
 
-      <div>
-        <label className="block text-sm font-medium text-gray-400 mb-2">
-          Description *
-        </label>
-        <textarea
-          className="w-full px-3 py-3 bg-iron-gray border-0 rounded-md text-white ring-1 ring-inset ring-charcoal-outline focus:ring-2 focus:ring-primary-blue transition-all duration-150 text-sm resize-none"
+        <TextArea
+          label="Description *"
           rows={4}
           value={formData.description}
           onChange={(e) => setFormData({ ...formData, description: e.target.value })}
           placeholder="Describe your team's goals and racing style..."
           disabled={createTeamMutation.isPending}
+          variant={errors.description ? 'error' : 'default'}
+          errorMessage={errors.description}
         />
-        {errors.description && (
-          <p className="text-danger-red text-xs mt-1">{errors.description}</p>
-        )}
-      </div>
 
-      <div className="bg-deep-graphite border border-charcoal-outline rounded-lg p-4">
-        <div className="flex items-start gap-3">
-          <div className="text-2xl">ℹ️</div>
-          <div className="flex-1">
-            <h4 className="text-white font-medium mb-1">About Team Creation</h4>
-            <ul className="text-sm text-gray-400 space-y-1">
-              <li>• You will be assigned as the team owner</li>
-              <li>• You can invite other drivers to join your team</li>
-              <li>• Team standings are calculated across leagues</li>
-              <li>• This is alpha data - it resets on page reload</li>
-            </ul>
-          </div>
-        </div>
-      </div>
+        <InfoBanner title="About Team Creation">
+          <Stack as="ul" gap={1}>
+            <Text as="li" size="sm" color="text-gray-400">• You will be assigned as the team owner</Text>
+            <Text as="li" size="sm" color="text-gray-400">• You can invite other drivers to join your team</Text>
+            <Text as="li" size="sm" color="text-gray-400">• Team standings are calculated across leagues</Text>
+            <Text as="li" size="sm" color="text-gray-400">• This is alpha data - it resets on page reload</Text>
+          </Stack>
+        </InfoBanner>
 
-      <div className="flex gap-3">
-        <Button
-          type="submit"
-          variant="primary"
-          disabled={createTeamMutation.isPending}
-          className="flex-1"
-        >
-          {createTeamMutation.isPending ? 'Creating Team...' : 'Create Team'}
-        </Button>
-        {onCancel && (
+        <Box display="flex" gap={3}>
           <Button
-            type="button"
-            variant="secondary"
-            onClick={onCancel}
+            type="submit"
+            variant="primary"
             disabled={createTeamMutation.isPending}
+            fullWidth
           >
-            Cancel
+            {createTeamMutation.isPending ? 'Creating Team...' : 'Create Team'}
           </Button>
-        )}
-      </div>
-    </form>
+          {onCancel && (
+            <Button
+              type="button"
+              variant="secondary"
+              onClick={onCancel}
+              disabled={createTeamMutation.isPending}
+            >
+              Cancel
+            </Button>
+          )}
+        </Box>
+      </Stack>
+    </Box>
   );
-}
+}