extract components from website

apps/website/app/leagues/[id]/settings/page.tsx

@@ -1,8 +1,7 @@
 'use client';
 
 import { ReadonlyLeagueInfo } from '@/components/leagues/ReadonlyLeagueInfo';
-import DriverSummaryPill from '@/components/profile/DriverSummaryPill';
-import Button from '@/components/ui/Button';
+import LeagueOwnershipTransfer from '@/components/leagues/LeagueOwnershipTransfer';
 import Card from '@/components/ui/Card';
 import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
 import { isLeagueAdminOrHigherRole } from '@/lib/leagueRoles';
@@ -22,9 +21,6 @@ export default function LeagueSettingsPage() {
   const [settings, setSettings] = useState<LeagueSettingsViewModel | null>(null);
   const [loading, setLoading] = useState(true);
   const [isAdmin, setIsAdmin] = useState(false);
-  const [showTransferDialog, setShowTransferDialog] = useState(false);
-  const [selectedNewOwner, setSelectedNewOwner] = useState<string>('');
-  const [transferring, setTransferring] = useState(false);
   const router = useRouter();
 
   useEffect(() => {
@@ -58,20 +54,12 @@ export default function LeagueSettingsPage() {
 
   const ownerSummary = settings?.owner || null;
 
-  const handleTransferOwnership = async () => {
-    if (!selectedNewOwner || !settings) return;
-
-    setTransferring(true);
+  const handleTransferOwnership = async (newOwnerId: string) => {
     try {
-      await leagueSettingsService.transferOwnership(leagueId, currentDriverId, selectedNewOwner);
-
-      setShowTransferDialog(false);
+      await leagueSettingsService.transferOwnership(leagueId, currentDriverId, newOwnerId);
       router.refresh();
     } catch (err) {
-      console.error('Failed to transfer ownership:', err);
-      alert(err instanceof Error ? err.message : 'Failed to transfer ownership');
-    } finally {
-      setTransferring(false);
+      throw err; // Let the component handle the error
     }
   };
 
@@ -128,76 +116,11 @@ export default function LeagueSettingsPage() {
       <div className="space-y-4">
         <ReadonlyLeagueInfo league={settings.league} configForm={settings.config} />
 
-        {/* League Owner - Compact */}
-        <div className="rounded-xl border border-charcoal-outline bg-gradient-to-br from-iron-gray/40 to-iron-gray/20 p-5">
-          <h3 className="text-sm font-semibold text-gray-400 mb-3">League Owner</h3>
-          {ownerSummary ? (
-            <DriverSummaryPill
-              driver={ownerSummary.driver}
-              rating={ownerSummary.rating}
-              rank={ownerSummary.rank}
-            />
-          ) : (
-            <p className="text-sm text-gray-500">Loading owner details...</p>
-          )}
-        </div>
-
-        {/* Transfer Ownership - Owner Only */}
-        {settings.league.ownerId === currentDriverId && settings.members.length > 0 && (
-          <div className="rounded-xl border border-charcoal-outline bg-gradient-to-br from-iron-gray/40 to-iron-gray/20 p-5">
-            <div className="flex items-center gap-2 mb-3">
-              <UserCog className="w-4 h-4 text-gray-400" />
-              <h3 className="text-sm font-semibold text-gray-400">Transfer Ownership</h3>
-            </div>
-            <p className="text-xs text-gray-500 mb-4">
-              Transfer league ownership to another active member. You will become an admin.
-            </p>
-
-            {!showTransferDialog ? (
-              <Button
-                variant="secondary"
-                onClick={() => setShowTransferDialog(true)}
-              >
-                Transfer Ownership
-              </Button>
-            ) : (
-              <div className="space-y-3">
-                <select
-                  value={selectedNewOwner}
-                  onChange={(e) => setSelectedNewOwner(e.target.value)}
-                  className="w-full rounded-lg border border-charcoal-outline bg-charcoal-card px-3 py-2 text-sm text-white focus:border-primary-blue focus:outline-none"
-                >
-                  <option value="">Select new owner...</option>
-                  {settings.members.map((member) => (
-                    <option key={member.driver.id} value={member.driver.id}>
-                      {member.driver.name}
-                    </option>
-                  ))}
-                </select>
-
-                <div className="flex gap-2">
-                  <Button
-                    variant="primary"
-                    onClick={handleTransferOwnership}
-                    disabled={!selectedNewOwner || transferring}
-                  >
-                    {transferring ? 'Transferring...' : 'Confirm Transfer'}
-                  </Button>
-                  <Button
-                    variant="secondary"
-                    onClick={() => {
-                      setShowTransferDialog(false);
-                      setSelectedNewOwner('');
-                    }}
-                    disabled={transferring}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
+        <LeagueOwnershipTransfer
+          settings={settings}
+          currentDriverId={currentDriverId}
+          onTransferOwnership={handleTransferOwnership}
+        />
       </div>
     </div>
   );