website refactor

apps/website/components/leaderboards/LeaderboardHeaderPanel.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { ArrowLeft, LucideIcon } from 'lucide-react';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Stack } from '@/ui/Stack';
+import { Button } from '@/ui/Button';
+import { Icon } from '@/ui/Icon';
+import { Surface } from '@/ui/Surface';
+
+interface LeaderboardHeaderPanelProps {
+  title: string;
+  description?: string;
+  icon?: LucideIcon;
+  onBack?: () => void;
+  backLabel?: string;
+  children?: React.ReactNode;
+}
+
+export function LeaderboardHeaderPanel({
+  title,
+  description,
+  icon,
+  onBack,
+  backLabel = 'Back',
+  children,
+}: LeaderboardHeaderPanelProps) {
+  return (
+    <Box mb={8}>
+      {onBack && (
+        <Box mb={6}>
+          <Button
+            variant="secondary"
+            onClick={onBack}
+            icon={<Icon icon={ArrowLeft} size={4} />}
+          >
+            {backLabel}
+          </Button>
+        </Box>
+      )}
+
+      <Stack direction="row" align="center" justify="between" gap={4}>
+        <Stack direction="row" align="center" gap={4}>
+          {icon && (
+            <Surface 
+              variant="muted" 
+              rounded="xl" 
+              padding={3} 
+              bg="linear-gradient(to bottom right, rgba(25, 140, 255, 0.2), rgba(25, 140, 255, 0.05))" 
+              border 
+              borderColor="border-primary-blue/20"
+            >
+              <Icon icon={icon} size={7} color="text-primary-blue" />
+            </Surface>
+          )}
+          <Box>
+            <Heading level={1}>{title}</Heading>
+            {description && (
+              <Text color="text-gray-400" block mt={1}>
+                {description}
+              </Text>
+            )}
+          </Box>
+        </Stack>
+        {children}
+      </Stack>
+    </Box>
+  );
+}