feat: add Panelheader component to create shifted header

main
Josue 4 years ago committed by Tsu-ba-me
parent df8e3ee8a0
commit 6e240eb160
  1. 1
      striker-ui/components/InnerPanel.tsx
  2. 39
      striker-ui/components/PanelHeader.tsx

@ -16,6 +16,7 @@ const useStyles = makeStyles(() => ({
marginTop: '20px',
marginBottom: '20px',
paddingBottom: '10px',
position: 'relative',
},
}));

@ -0,0 +1,39 @@
import { ReactNode } from 'react';
import { Box } from '@material-ui/core';
import { makeStyles } from '@material-ui/core/styles';
import { TEXT } from '../lib/consts/DEFAULT_THEME';
type Props = {
children: ReactNode;
};
const useStyles = makeStyles(() => ({
innerHeader: {
position: 'relative',
padding: '0 10px',
'&::before': {
top: '-5px',
left: '-5px',
padding: '10px 0',
position: 'absolute',
content: '""',
borderColor: TEXT,
borderWidth: '1px',
borderRadius: '3px',
borderStyle: 'solid',
width: '100%',
},
},
}));
const PanelHeader = ({ children }: Props): JSX.Element => {
const classes = useStyles();
return (
<Box className={classes.innerHeader} style={{ whiteSpace: 'pre-wrap' }}>
{children}
</Box>
);
};
export default PanelHeader;
Loading…
Cancel
Save