@lunit/oui
Version:
Lunit Oncology UI components
53 lines (52 loc) • 1.6 kB
JavaScript
import { Box, Button, styled, Typography } from '@mui/material';
export const HistogramContainer = styled(Box)({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: '5px',
position: 'relative',
});
export const HistogramTitle = styled(Typography)({
width: '100%',
paddingBottom: '12px',
});
export const HistogramNoData = styled(Typography)(({ theme }) => ({
top: '42%',
position: 'absolute',
padding: '8px 16px',
borderRadius: '4px',
background: theme.palette.neutralGrey[75],
zIndex: 9999,
}));
export const HistogramTabsContainer = styled(Box)({
width: '100%',
display: 'grid',
gridTemplateColumns: '1fr 1fr',
});
export const HistogramChartContainer = styled(Box)({
position: 'relative',
height: '200px',
width: '244px',
marginBottom: '32px',
});
export const HistogramDescription = styled(Box)({
display: 'flex',
flexDirection: 'column',
gap: '4px',
});
export const TabButton = styled(Button, {
shouldForwardProp: (prop) => prop !== 'active',
})(({ theme, active = false }) => ({
borderRadius: '8px',
backgroundColor: active ? theme.palette.neutralGrey[75] : 'transparent',
border: `1px solid ${theme.palette.neutralGrey[75]} !important`,
textTransform: 'none',
color: active ? theme.palette.neutralGrey[0] : theme.palette.neutralGrey[45],
cursor: active ? 'default' : 'pointer',
height: '28px',
width: '128px',
minWidth: '128px',
'&:hover': {
backgroundColor: active ? theme.palette.neutralGrey[75] : 'transparent',
},
}));