website refactor

apps/website/components/admin/BulkActionBar.tsx

@@ -1,9 +1,7 @@
 'use client';
 
 import { Button } from '@/ui/Button';
-import { Stack } from '@/ui/primitives/Stack';
-import { Text } from '@/ui/Text';
-import { AnimatePresence, motion } from 'framer-motion';
+import { BulkActions } from '@/ui/BulkActions';
 import React from 'react';
 
 interface BulkActionBarProps {
@@ -28,65 +26,28 @@ export function BulkActionBar({
   onClearSelection
 }: BulkActionBarProps) {
   return (
-    <AnimatePresence>
-      {selectedCount > 0 && (
-        <Stack
-          as={motion.div}
-          initial={{ y: 100, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          exit={{ y: 100, opacity: 0 }}
-          position="fixed"
-          bottom="8"
-          left="1/2"
-          translateX="-1/2"
-          zIndex={50}
-          bg="bg-surface-charcoal"
-          border
-          borderColor="border-primary-blue/50"
-          rounded="xl"
-          shadow="xl"
-          px={6}
-          py={4}
-          bgOpacity={0.9}
-          blur="md"
+    <BulkActions
+      selectedCount={selectedCount}
+      isOpen={selectedCount > 0}
+    >
+      {actions.map((action) => (
+        <Button
+          key={action.label}
+          size="sm"
+          variant={action.variant === 'danger' ? 'danger' : (action.variant || 'primary')}
+          onClick={action.onClick}
+          icon={action.icon}
         >
-          <Stack direction="row" align="center" gap={8}>
-            <Stack direction="row" align="center" gap={3}>
-              <Stack bg="bg-primary-blue" rounded="full" px={2} py={0.5}>
-                <Text size="xs" weight="bold" color="text-white">
-                  {selectedCount}
-                </Text>
-              </Stack>
-              <Text size="sm" weight="medium" color="text-white">
-                Items Selected
-              </Text>
-            </Stack>
-
-            <Stack w="px" h="6" bg="bg-charcoal-outline">{null}</Stack>
-
-            <Stack direction="row" align="center" gap={3}>
-              {actions.map((action) => (
-                <Button
-                  key={action.label}
-                  size="sm"
-                  variant={action.variant === 'danger' ? 'secondary' : (action.variant || 'primary')}
-                  onClick={action.onClick}
-                  icon={action.icon}
-                >
-                  {action.label}
-                </Button>
-              ))}
-              <Button
-                size="sm"
-                variant="ghost"
-                onClick={onClearSelection}
-              >
-                Cancel
-              </Button>
-            </Stack>
-          </Stack>
-        </Stack>
-      )}
-    </AnimatePresence>
+          {action.label}
+        </Button>
+      ))}
+      <Button
+        size="sm"
+        variant="ghost"
+        onClick={onClearSelection}
+      >
+        Cancel
+      </Button>
+    </BulkActions>
   );
 }