From 6e240eb1607b1e694c52f33e390f36b04a9f5816 Mon Sep 17 00:00:00 2001
From: Josue <josue.quilon-barrios@senecacollege.ca>
Date: Mon, 29 Mar 2021 18:40:17 -0400
Subject: [PATCH] feat: add Panelheader component to create shifted header

---
 striker-ui/components/InnerPanel.tsx  |  1 +
 striker-ui/components/PanelHeader.tsx | 39 +++++++++++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 striker-ui/components/PanelHeader.tsx

diff --git a/striker-ui/components/InnerPanel.tsx b/striker-ui/components/InnerPanel.tsx
index 07dc0585..4351037c 100644
--- a/striker-ui/components/InnerPanel.tsx
+++ b/striker-ui/components/InnerPanel.tsx
@@ -16,6 +16,7 @@ const useStyles = makeStyles(() => ({
     marginTop: '20px',
     marginBottom: '20px',
     paddingBottom: '10px',
+    position: 'relative',
   },
 }));
 
diff --git a/striker-ui/components/PanelHeader.tsx b/striker-ui/components/PanelHeader.tsx
new file mode 100644
index 00000000..04dafde7
--- /dev/null
+++ b/striker-ui/components/PanelHeader.tsx
@@ -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;