37 lines
1.0 KiB
TypeScript
37 lines
1.0 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Surface } from './Surface';
|
|
|
|
export interface ControlBarProps {
|
|
children: ReactNode;
|
|
leftContent?: ReactNode;
|
|
}
|
|
|
|
export const ControlBar = ({ children, leftContent }: ControlBarProps) => {
|
|
return (
|
|
<Surface
|
|
as="header"
|
|
variant="precision"
|
|
paddingX={0}
|
|
height="56px"
|
|
position="sticky"
|
|
top="0"
|
|
zIndex={100}
|
|
borderBottom={true}
|
|
backgroundColor="rgba(10, 10, 11, 0.92)"
|
|
backdropBlur="xl"
|
|
shadow="0 1px 0 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35)"
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="between" h="full" width="full" px={4}>
|
|
{leftContent && (
|
|
<Box display="flex" alignItems="center" h="full" minWidth="0" flex={1}>
|
|
{leftContent}
|
|
</Box>
|
|
)}
|
|
<Box display="flex" alignItems="center" justifyContent="end" minWidth="0" flex={leftContent ? 0 : 1}>
|
|
{children}
|
|
</Box>
|
|
</Box>
|
|
</Surface>
|
|
);
|
|
}; |