ohif-viewer/platform/ui/src/components/Dialog/Header.tsx
2024-12-17 13:20:19 -05:00

49 lines
1.0 KiB
TypeScript

import React from 'react';
import classNames from 'classnames';
import PropTypes from 'prop-types';
import Typography from '../Typography';
import { Icons } from '@ohif/ui-next';
const CloseButton = ({ onClick }) => {
return (
<Icons.Close
data-cy="close-button"
onClick={onClick}
className="text-primary-active cursor-pointer"
/>
);
};
CloseButton.propTypes = {
onClick: PropTypes.func,
};
const Header = ({ title, noCloseButton = false, onClose }) => {
const theme = 'bg-primary-dark';
const flex = 'flex items-center justify-between';
const padding = 'pb-[20px]';
return (
<div className={classNames(theme, flex, padding)}>
<Typography
variant="h6"
color="primaryLight"
className="!leading-[1.2]"
>
{title}
</Typography>
{!noCloseButton && <CloseButton onClick={onClose} />}
</div>
);
};
Header.propTypes = {
className: PropTypes.string,
title: PropTypes.string,
noCloseButton: PropTypes.bool,
onClose: PropTypes.func,
};
export default Header;