feat: home link icon

src/components/Header.tsx

@@ -1,7 +1,20 @@
-import { Divider, Stack, SvgIcon, Typography } from "@mui/material";
+import {
+  Button,
+  Divider,
+  Link,
+  Stack,
+  SvgIcon,
+  Typography,
+} from "@mui/material";
 import React from "react";
+import { useNavigation } from "@react-navigation/native";
+import { NativeStackNavigationProp } from "@react-navigation/native-stack";
+import { StackParamsList } from "../types";
 
-export const Header: React.FC<{ title: string }> = ({ title }) => (
+export const Header: React.FC<{ title: string }> = ({ title }) => {
+  const navigation =
+    useNavigation<NativeStackNavigationProp<StackParamsList>>();
+  return (
     <Stack
       direction="row"
       sx={{
@@ -11,6 +24,12 @@ export const Header: React.FC<{ title: string }> = ({ title }) => (
         py: 2,
       }}
       spacing={1}
+    >
+      <Button
+        component={Link}
+        onClick={() => {
+          navigation.navigate("Home");
+        }}
       >
         <SvgIcon sx={{ height: 20, width: 115 }}>
           <svg
@@ -56,6 +75,7 @@ export const Header: React.FC<{ title: string }> = ({ title }) => (
             />
           </svg>
         </SvgIcon>
+      </Button>
       <Divider
         flexItem
         orientation="vertical"
@@ -65,3 +85,4 @@ export const Header: React.FC<{ title: string }> = ({ title }) => (
       <Typography variant="h5">{title}</Typography>
     </Stack>
   );
+};