website refactor

apps/website/templates/LeagueDetailTemplate.tsx

@@ -3,35 +3,33 @@
 import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
 import { routes } from '@/lib/routing/RouteConfig';
 import type { LeagueDetailViewData } from '@/lib/view-data/LeagueDetailViewData';
-import { 
-  SharedBox, 
-  SharedLink, 
-  SharedText, 
-  SharedStack,
-  SharedContainer,
-  SharedIcon
-} from '@/components/shared/UIComponents';
+import { Box } from '@/ui/Box';
+import { Link } from '@/ui/Link';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Container } from '@/ui/Container';
+import { Icon } from '@/ui/Icon';
 import { ChevronRight } from 'lucide-react';
 import { TemplateProps } from '@/lib/contracts/components/ComponentContracts';
 
 export function LeagueDetailTemplate({ viewData, children, tabs }: TemplateProps<LeagueDetailViewData> & { children?: React.ReactNode, tabs?: any[] }) {
   return (
-    <SharedContainer size="lg">
-      <SharedBox paddingY={8}>
-        <SharedStack gap={8}>
-          <SharedBox>
-            <SharedStack direction="row" align="center" gap={2}>
-              <SharedLink href={routes.public.leagues}>
-                <SharedText size="sm" color="text-gray-400">Leagues</SharedText>
-              </SharedLink>
-              <SharedIcon icon={ChevronRight} size={3} color="text-gray-500" />
-              <SharedText size="sm" color="text-white">{viewData.name}</SharedText>
-            </SharedStack>
-          </SharedBox>
+    <Container size="lg">
+      <Box paddingY={8}>
+        <Stack gap={8}>
+          <Box>
+            <Stack direction="row" align="center" gap={2}>
+              <Link href={routes.public.leagues}>
+                <Text size="sm" color="text-gray-400">Leagues</Text>
+              </Link>
+              <Icon icon={ChevronRight} size={3} color="text-gray-500" />
+              <Text size="sm" color="text-white">{viewData.name}</Text>
+            </Stack>
+          </Box>
           {children}
           {/* ... rest of the template ... */}
-        </SharedStack>
-      </SharedBox>
-    </SharedContainer>
+        </Stack>
+      </Box>
+    </Container>
   );
 }