website refactor

apps/website/components/races/RaceSidebarPanel.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Box } from '@/ui/Box';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Icon } from '@/ui/Icon';
+import { LucideIcon } from 'lucide-react';
+
+interface RaceSidebarPanelProps {
+  title: string;
+  icon?: LucideIcon;
+  children: React.ReactNode;
+}
+
+export function RaceSidebarPanel({
+  title,
+  icon,
+  children
+}: RaceSidebarPanelProps) {
+  return (
+    <Box 
+      bg="bg-panel-gray" 
+      rounded="xl" 
+      border 
+      borderColor="border-charcoal-outline" 
+      overflow="hidden"
+    >
+      <Box 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>
+      </Box>
+      <Box p={4}>
+        {children}
+      </Box>
+    </Box>
+  );
+}