feat: separate HeaderTab component

@asketonim, feel free to correct these changes

1 files changed, 16 insertions, 10 deletions

diff --git a/src/lib/Header/Header.tsx b/src/lib/Header/Header.tsx
index 2b13e3f..cc73fd9 100644
--- a/src/lib/Header/Header.tsx
+++ b/src/lib/Header/Header.tsx
@@ -10,14 +10,13 @@ import {
 
 import { makeStyles } from '@material-ui/core/styles';
 
-
 interface PropTypes {
   logo: {
     icon: React.ReactNode;
     title: string;
   };
   contents: {
-    [key: string]: React.ReactNode;
+    [key: string]: React.ReactNode | null;
   };
   page: string;
   setPage: any;
@@ -49,6 +48,19 @@ const useStyles = makeStyles((theme: any) => ({
 const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => {
   const classes = useStyles();
 
+  const HeaderTab: React.FC<{ item: string }> = ({ item }) => {
+    const icon = contents[item];
+    return (
+      <Tab
+        label={item}
+        icon={icon}
+        value={item}
+        className={classes.tab}
+        key={item}
+      />
+    )
+  };
+
   const handleChange = (event: any, newPage: string) => {
     setPage(newPage);
   };
@@ -61,14 +73,8 @@ const Header: React.FC<PropTypes> = ({ logo, contents, page, setPage }) => {
         {logo.title}
       </Typography>
       <Tabs onChange={handleChange} value={page}>
-        {contents && Object.keys(contents).map(item => (
-          <Tab
-            label={item}
-            icon={contents[item]}
-            value={item}
-            className={classes.tab}
-            key={item}
-          />
+        {contents && Object.keys(contents).map((item: string) => (
+          <HeaderTab item={item}/>
         ))}
       </Tabs>
     </Toolbar>