website refactor

apps/website/components/admin/AdminToolbar.tsx

@@ -1,7 +1,6 @@
 'use client';
 
-import { Card } from '@/ui/Card';
-import { Stack } from '@/ui/primitives/Stack';
+import { ControlBar } from '@/ui/ControlBar';
 import React from 'react';
 
 interface AdminToolbarProps {
@@ -20,17 +19,11 @@ export function AdminToolbar({
   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 && (
-          <Stack flexGrow={1}>
-            {leftContent}
-          </Stack>
-        )}
-        <Stack direction="row" align="center" gap={3} flexGrow={leftContent ? 0 : 1} wrap>
-          {children}
-        </Stack>
-      </Stack>
-    </Card>
+    <ControlBar
+      leftContent={leftContent}
+      variant="dark"
+    >
+      {children}
+    </ControlBar>
   );
 }