feat: create panel and inner panel to be used with all the elements in the page

striker-ui/components/InnerPanel.tsx

@@ -0,0 +1,30 @@
+import { Box } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
+import { TEXT } from '../lib/consts/DEFAULT_THEME';
+
+const useStyles = makeStyles(() => ({
+  innerBody: {
+    borderWidth: '1px',
+    borderRadius: '3px',
+    borderStyle: 'solid',
+    borderColor: TEXT,
+    marginTop: '5px',
+    marginLeft: '5px',
+    paddinLeft: '5px',
+  },
+  innerHeader: {
+    width: '100%',
+    borderWidth: '1px',
+    borderRadius: '3px',
+    borderStyle: 'solid',
+    borderColor: TEXT,
+  },
+}));
+
+const InnerPanel = (): JSX.Element => {
+  const classes = useStyles();
+
+  return <Box className={classes.innerBody}>inner body</Box>;
+};
+
+export default InnerPanel;

striker-ui/components/Panel.tsx

@@ -0,0 +1,37 @@
+import { ReactNode } from 'react';
+import { Paper, 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(() => ({
+  rectangle: {
+    width: '30px',
+    height: '30px',
+    borderWidth: '1px',
+    borderRadius: '3px',
+    borderStyle: 'solid',
+    borderColor: TEXT,
+  },
+}));
+
+const Panel = ({ children }: Props): JSX.Element => {
+  const classes = useStyles();
+
+  return (
+    <Paper>
+      <Box display="flex" justifyContent="flex-start">
+        <Box className={classes.rectangle} />
+      </Box>
+      {children}
+      <Box display="flex" justifyContent="flex-end">
+        <Box className={classes.rectangle} />
+      </Box>
+    </Paper>
+  );
+};
+
+export default Panel;