website refactor

apps/website/components/races/RaceSidebarPanel.tsx

@@ -1,6 +1,5 @@
+import { Panel } from '@/ui/Panel';
 import { Icon } from '@/ui/Icon';
-import { Stack } from '@/ui/primitives/Stack';
-import { Text } from '@/ui/Text';
 import { LucideIcon } from 'lucide-react';
 import React from 'react';
 
@@ -16,24 +15,12 @@ export function RaceSidebarPanel({
   children
 }: RaceSidebarPanelProps) {
   return (
-    <Stack 
-      bg="bg-panel-gray" 
-      rounded="xl" 
-      border 
-      borderColor="border-charcoal-outline" 
-      overflow="hidden"
+    <Panel 
+      title={title}
+      variant="dark"
+      padding={4}
     >
-      <Stack p={4} borderBottom="1px solid" borderColor="border-charcoal-outline" bg="bg-graphite-black/30">
-        <Stack direction="row" align="center" gap={2}>
-          {icon && <Icon icon={icon} size={4} color="#198CFF" />}
-          <Text weight="bold" size="sm" color="text-white" uppercase>
-            {title}
-          </Text>
-        </Stack>
-      </Stack>
-      <Stack p={4}>
-        {children}
-      </Stack>
-    </Stack>
+      {children}
+    </Panel>
   );
 }