35 lines
957 B
TypeScript
35 lines
957 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Surface } from './primitives/Surface';
|
|
|
|
export interface ControlBarProps {
|
|
children: ReactNode;
|
|
leftContent?: ReactNode;
|
|
variant?: 'default' | 'dark';
|
|
}
|
|
|
|
export const ControlBar = ({
|
|
children,
|
|
leftContent,
|
|
variant = 'default'
|
|
}: ControlBarProps) => {
|
|
return (
|
|
<Surface
|
|
variant={variant === 'dark' ? 'dark' : 'muted'}
|
|
padding={4}
|
|
style={{ borderBottom: '1px solid var(--ui-color-border-default)' }}
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="between" flexWrap="wrap" gap={4}>
|
|
{leftContent && (
|
|
<Box display="flex" alignItems="center" gap={4} flex={1}>
|
|
{leftContent}
|
|
</Box>
|
|
)}
|
|
<Box display="flex" alignItems="center" gap={4} justifyContent="end" flex={leftContent ? 0 : 1}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
};
|