website refactor

apps/website/components/admin/AdminHeaderPanel.tsx

@@ -0,0 +1,53 @@
+'use client';
+
+import React from 'react';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+import { Heading } from '@/ui/Heading';
+import { Text } from '@/ui/Text';
+import { ProgressLine } from '@/components/shared/ux/ProgressLine';
+
+interface AdminHeaderPanelProps {
+  title: string;
+  description?: string;
+  actions?: React.ReactNode;
+  isLoading?: boolean;
+}
+
+/**
+ * AdminHeaderPanel
+ * 
+ * Semantic header for admin pages.
+ * Includes title, description, actions, and a progress line for loading states.
+ */
+export function AdminHeaderPanel({
+  title,
+  description,
+  actions,
+  isLoading = false
+}: AdminHeaderPanelProps) {
+  return (
+    <Box position="relative" pb={4} borderBottom borderColor="border-charcoal-outline">
+      <Stack direction="row" align="center" justify="between">
+        <Box>
+          <Heading level={1} weight="bold" color="text-white">
+            {title}
+          </Heading>
+          {description && (
+            <Text size="sm" color="text-gray-400" block mt={1}>
+              {description}
+            </Text>
+          )}
+        </Box>
+        {actions && (
+          <Stack direction="row" align="center" gap={3}>
+            {actions}
+          </Stack>
+        )}
+      </Stack>
+      <Box position="absolute" bottom="0" left="0" w="full">
+        <ProgressLine isLoading={isLoading} />
+      </Box>
+    </Box>
+  );
+}