49 lines
1012 B
TypeScript
49 lines
1012 B
TypeScript
import { ReactNode } from 'react';
|
|
import { Stack } from './Stack';
|
|
|
|
interface ToolbarProps {
|
|
children: ReactNode;
|
|
minimized?: boolean;
|
|
bottom?: number | string;
|
|
}
|
|
|
|
export function Toolbar({ children, minimized = false, bottom = '2rem' }: ToolbarProps) {
|
|
if (minimized) {
|
|
return (
|
|
<Stack
|
|
position="fixed"
|
|
right={4}
|
|
zIndex={1000}
|
|
style={{ bottom }}
|
|
>
|
|
{children}
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Stack
|
|
position="fixed"
|
|
right={4}
|
|
zIndex={1000}
|
|
width="min(420px, calc(100vw - 2rem))"
|
|
maxHeight="calc(100vh - 2rem)"
|
|
overflow="auto"
|
|
border={true}
|
|
borderColor="var(--ui-color-border-default)"
|
|
rounded="xl"
|
|
bg="rgba(20, 22, 25, 0.92)"
|
|
padding={3}
|
|
style={{
|
|
bottom,
|
|
boxShadow: '0 18px 40px rgba(0,0,0,0.55)',
|
|
backdropFilter: 'blur(12px)',
|
|
WebkitBackdropFilter: 'blur(12px)',
|
|
}}
|
|
gap={4}
|
|
>
|
|
{children}
|
|
</Stack>
|
|
);
|
|
}
|