39 lines
853 B
TypeScript
39 lines
853 B
TypeScript
import React, { ReactNode } from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Container } from './Container';
|
|
|
|
export interface HeaderProps {
|
|
children: ReactNode;
|
|
actions?: ReactNode;
|
|
}
|
|
|
|
export const Header = ({
|
|
children,
|
|
actions
|
|
}: HeaderProps) => {
|
|
return (
|
|
<Box
|
|
as="header"
|
|
bg="var(--ui-color-bg-surface)"
|
|
borderBottom
|
|
paddingY={4}
|
|
position="sticky"
|
|
top={0}
|
|
zIndex={50}
|
|
>
|
|
<Container size="xl">
|
|
<Box display="flex" alignItems="center" justifyContent="between">
|
|
<Box display="flex" alignItems="center" gap={8}>
|
|
{children}
|
|
</Box>
|
|
{actions && (
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
{actions}
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
</Container>
|
|
</Box>
|
|
);
|
|
};
|