36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Badge } from './Badge';
|
|
import { Box } from './Box';
|
|
import { Surface } from './Surface';
|
|
import { Text } from './Text';
|
|
|
|
export interface BulkActionsProps {
|
|
children: ReactNode;
|
|
selectedCount: number;
|
|
isOpen: boolean;
|
|
}
|
|
|
|
export const BulkActions = ({ children, selectedCount, isOpen }: BulkActionsProps) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<Box
|
|
position="fixed"
|
|
style={{ bottom: '2rem', left: '50%', transform: 'translateX(-50%)', zIndex: 100 }}
|
|
>
|
|
<Surface variant="glass" rounded="xl" shadow="xl" padding={4} style={{ border: '1px solid var(--ui-color-intent-primary)' }}>
|
|
<Box display="flex" alignItems="center" gap={8}>
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
<Badge variant="primary">{selectedCount}</Badge>
|
|
<Text size="sm" weight="bold" variant="high">Items Selected</Text>
|
|
</Box>
|
|
<Box width="1px" height="1.5rem" bg="var(--ui-color-border-default)" />
|
|
<Box display="flex" alignItems="center" gap={3}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
</Surface>
|
|
</Box>
|
|
);
|
|
};
|