website refactor

apps/website/components/leagues/ReadonlyLeagueInfo.tsx

@@ -2,6 +2,9 @@
 
 import { Calendar, Users, Trophy, Gamepad2, Eye, Hash, Award } from 'lucide-react';
 import type { LeagueConfigFormModel } from '@/lib/types/LeagueConfigFormModel';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { InfoItem } from '@/ui/InfoItem';
 
 interface ReadonlyLeagueInfoProps {
   league: {
@@ -64,27 +67,19 @@ export function ReadonlyLeagueInfo({ league, configForm }: ReadonlyLeagueInfoPro
   ];
 
   return (
-    <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-4">League Information</h3>
+    <Box rounded="xl" border borderColor="border-charcoal-outline" bg="bg-iron-gray/40" p={5}>
+      <Heading level={5} color="text-gray-400" mb={4}>League Information</Heading>
       
-      <div className="grid grid-cols-2 sm:grid-cols-3 gap-4">
-        {infoItems.map((item, index) => {
-          const Icon = item.icon;
-          return (
-            <div key={index} className="flex items-start gap-2.5">
-              <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-iron-gray/60 shrink-0">
-                <Icon className="w-3.5 h-3.5 text-gray-500" />
-              </div>
-              <div className="min-w-0 flex-1">
-                <div className="text-[10px] text-gray-500 mb-0.5">{item.label}</div>
-                <div className="text-xs font-medium text-gray-300 truncate">
-                  {item.value}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    </div>
+      <Box display="grid" responsiveGridCols={{ base: 2, sm: 3 }} gap={4}>
+        {infoItems.map((item, index) => (
+          <InfoItem
+            key={index}
+            icon={item.icon}
+            label={item.label}
+            value={item.value}
+          />
+        ))}
+      </Box>
+    </Box>
   );
-}
+}