website refactor

apps/website/components/admin/AdminSectionHeader.tsx

@@ -0,0 +1,45 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { Box } from '@/ui/Box';
+
+interface AdminSectionHeaderProps {
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+}
+
+/**
+ * AdminSectionHeader
+ * 
+ * Semantic header for sections within admin pages.
+ * Follows "Precision Racing Minimal" theme: dense, clear hierarchy.
+ */
+export function AdminSectionHeader({
+  title,
+  description,
+  actions
+}: AdminSectionHeaderProps) {
+  return (
+    <Stack direction="row" align="center" justify="between" mb={4}>
+      <Box>
+        <Heading level={3} weight="bold" color="text-white">
+          {title}
+        </Heading>
+        {description && (
+          <Text size="xs" color="text-gray-500" block mt={0.5}>
+            {description}
+          </Text>
+        )}
+      </Box>
+      {actions && (
+        <Stack direction="row" align="center" gap={2}>
+          {actions}
+        </Stack>
+      )}
+    </Stack>
+  );
+}