website refactor

apps/website/components/admin/AdminToolbar.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+import { Card } from '@/ui/Card';
+import { Stack } from '@/ui/Stack';
+import { Box } from '@/ui/Box';
+
+interface AdminToolbarProps {
+  children: React.ReactNode;
+  leftContent?: React.ReactNode;
+}
+
+/**
+ * AdminToolbar
+ * 
+ * Semantic toolbar for admin pages.
+ * Used for filters, search, and secondary actions.
+ */
+export function AdminToolbar({
+  children,
+  leftContent
+}: AdminToolbarProps) {
+  return (
+    <Card p={3} bg="bg-charcoal/50" borderColor="border-charcoal-outline">
+      <Stack direction="row" align="center" justify="between" gap={4} wrap>
+        {leftContent && (
+          <Box flexGrow={1}>
+            {leftContent}
+          </Box>
+        )}
+        <Stack direction="row" align="center" gap={3} flexGrow={leftContent ? 0 : 1} wrap>
+          {children}
+        </Stack>
+      </Stack>
+    </Card>
+  );
+}