From 9654107ee160521e650140c37bda441f0ac0ed96 Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Wed, 16 Aug 2023 14:48:08 -0300
Subject: [PATCH 1/6] feat(SearchResult): Add query info on dialog

---
 src/components/SearchResult.tsx | 8 +++++---
 src/routes/Layout.tsx           | 3 +++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/SearchResult.tsx b/src/components/SearchResult.tsx
index 6738368..692e53b 100644
--- a/src/components/SearchResult.tsx
+++ b/src/components/SearchResult.tsx
@@ -13,6 +13,7 @@ import { TransitionProps } from "@mui/material/transitions";
 import { Close } from "@mui/icons-material";
 
 type Props = {
+  currentSearch: string;
   searchResults: FoodList;
   ifSearched: boolean;
   closeModal: () => void;
@@ -28,7 +29,7 @@ const Transition = forwardRef(function Transition(
 });
 
 function SearchResult(props: Props) {
-  const { searchResults, ifSearched, closeModal } = props;
+  const { currentSearch, searchResults, ifSearched, closeModal } = props;
 
   const foodItems = searchResults.map((item, key) => {
     return <Item key={key} {...item} />;
@@ -44,9 +45,10 @@ function SearchResult(props: Props) {
       aria-describedby="the results of your search are shown here"
       TransitionComponent={Transition}
     >
-      <Stack direction="row">
+      <Stack direction="row" alignItems="center" p={2}>
+        <Typography variant="h5" component="div">Search: {currentSearch}</Typography>
         <IconButton
-          sx={{ m: 2, ml: "auto" }}
+          sx={{ml: "auto" }}
           edge="start"
           color="inherit"
           onClick={closeModal}
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index 0468a96..db34cbd 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -48,12 +48,14 @@ const theme = createTheme({
 
 function Layout({ food }: { food: FoodList }) {
   //search bar code
+  const [currentSearch, setCurrentSearch] = useState('');
   const [ifSearched, setIfSearched] = useState(false);
   const [searchResults, setSearchResults] = useState([] as FoodList);
   const closeModal = () => setIfSearched(false);
 
   const onSearch = (query: string, food: FoodList) => {
     if (query != "") {
+      setCurrentSearch(query)
       setIfSearched(true);
       setSearchResults(food);
     }
@@ -87,6 +89,7 @@ function Layout({ food }: { food: FoodList }) {
         />
         {ifSearched ? (
           <SearchResult
+            currentSearch={currentSearch}
             searchResults={searchResults}
             ifSearched={ifSearched}
             closeModal={closeModal}

From b7638a83d7071977ea84b1dd4faf67e0d9b7c1f9 Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Wed, 16 Aug 2023 15:41:45 -0300
Subject: [PATCH 2/6] wip(): new proposal

---
 src/App.tsx                   |  2 +-
 src/components/HeaderBar.tsx  | 19 +------------
 src/components/Item.tsx       |  9 +++----
 src/routes/FoodOfTheMonth.tsx | 45 ++-----------------------------
 src/routes/FoodPage.tsx       | 25 +++++++-----------
 src/routes/Layout.tsx         | 50 ++++++++++++++++++++++++++++++++++-
 6 files changed, 67 insertions(+), 83 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7897427..88271c0 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,7 +28,7 @@ export default function App() {
                 element={<Navigate to={`/month/${currentMonth}`} replace />}
               />
               <Route
-                path="/foodpage/:id"
+                path="/:id/:selectedMonthNum"
                 element={<FoodPage key="foodpage"/>}
               />
               <Route
diff --git a/src/components/HeaderBar.tsx b/src/components/HeaderBar.tsx
index 7331d57..4f59c28 100644
--- a/src/components/HeaderBar.tsx
+++ b/src/components/HeaderBar.tsx
@@ -1,10 +1,9 @@
 import type { FoodList, FoodObject } from "../types/food";
 import Fuse from 'fuse.js'
 import { useRef, useEffect } from "react"
-import { useNavigate, useLocation } from "react-router-dom";
 import i18next from "i18next";
 import { useTranslation } from "react-i18next";
-import { ArrowBackIosNew, Menu, Search } from "@mui/icons-material";
+import { Menu, Search } from "@mui/icons-material";
 import {
   AppBar,
   styled,
@@ -59,23 +58,7 @@ export default function HeaderBar(props: Props) {
     return fuse.search(searchLanguage).map((i) => i.item)
   };
 
-  const navigate = useNavigate();
-  const location = useLocation();
-
   function leftButton() {
-    if (location.pathname.split("/")[1] === "foodpage") {
-      return (
-        <IconButton
-          size="large"
-          edge="start"
-          color="inherit"
-          aria-label="return"
-          onClick={() => navigate(-1)}
-        >
-          <ArrowBackIosNew />
-        </IconButton>
-      );
-    }
     return (
       <IconButton
         size="large"
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
index 978200e..07398f2 100644
--- a/src/components/Item.tsx
+++ b/src/components/Item.tsx
@@ -1,6 +1,6 @@
 import type { FoodObject } from "../types/food";
 
-import { Link } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { Box, Stack, Typography, styled } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
@@ -11,18 +11,18 @@ const ImgBox = styled(Stack)(({ theme }) => ({
   boxShadow: "3px 4px 8px #888888",
   overflow: "clip",
   color: theme.palette.primary.light,
-  backgroundColor: theme.palette.primary.main, 
-  
+  backgroundColor: theme.palette.primary.main,
 }));
 
 function Item(props: FoodObject) {
   const { t } = useTranslation();
   const image = props.image.toLowerCase();
+  const { selectedMonthNum } = useParams();
   return (
     <Box
       sx={{ flexGrow: 1, width: "100%", maxWidth: "30%", minWidth: 90 }}
     >
-      <Link to={`/foodpage/${props.description[0].slug}`}>
+      <Link to={`/${props.description[0].slug}/${selectedMonthNum}`}>
         <ImgBox>
           <Box position="relative" flexGrow={1}>
             <img
@@ -33,7 +33,6 @@ function Item(props: FoodObject) {
           </Box>
           <Box position="relative" height="20%" sx={{ textAlign: 'center'}}>
             <Typography
-              
               top={0}
               fontSize="max(1rem, min(4.5vw, 3rem))"
               fontWeight={400}
diff --git a/src/routes/FoodOfTheMonth.tsx b/src/routes/FoodOfTheMonth.tsx
index ff1fc60..a83d13e 100644
--- a/src/routes/FoodOfTheMonth.tsx
+++ b/src/routes/FoodOfTheMonth.tsx
@@ -1,7 +1,7 @@
 import type { FoodList, FoodCategory, FoodObject } from "../types/food";
 import React from "react";
 import { useState, useEffect } from "react";
-import { useParams, Link, useNavigate } from "react-router-dom";
+import { useParams, useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 import { FoodDBContext } from "../contexts/FoodDB";
 import RenderFoods from "../components/RenderFoods";
@@ -9,13 +9,9 @@ import {
   Box,
   Tab,
   Tabs,
-  styled,
-  alpha,
   Chip,
-  Typography,
   Stack,
 } from "@mui/material";
-import { ArrowLeft, ArrowRight } from "@mui/icons-material";
 
 export default function FoodOfTheMonth() {
   const [food, _] = React.useContext(FoodDBContext);
@@ -55,50 +51,13 @@ export default function FoodOfTheMonth() {
     setFoodType(newFoodCategory);
   };
 
-  //variables to change month when pressing the arrows
-  const prevMonth = monthNum != 0 ? monthNum - 1 : 11;
-  const nextMonth = monthNum != 11 ? monthNum + 1 : 0;
-
-  //styled MUI arrows
-  const ArrowButton = styled(Link)(({ theme }) => ({
-    color: alpha(theme.palette.primary.light, 0.75),
-    "&:hover": {
-      color: alpha(theme.palette.primary.light, 0.95),
-    },
-    display: "flex",
-    alignItems: "center",
-    margin: theme.spacing(1),
-    width: "auto",
-  }));
-
-  const ShadowBox = styled(Stack)(({ theme }) => ({
-    boxShadow: `0 2px 4px ${theme.palette.secondary}`,
-  }));
-
   return (
     <Stack height="100%">
-      <ShadowBox
-        direction="row"
-        justifyContent="space-between"
-        bgcolor="secondary.main"
-        color="primary.light"
-        boxShadow="0 2px 4px #332323"
-      >
-        <ArrowButton to={`/month/${prevMonth + 1}`}>
-          <ArrowLeft />
-        </ArrowButton>
-        <Typography variant="h6" display="flex" alignItems="center">
-          {t(`month_${monthNum}`)}
-        </Typography>
-        <ArrowButton to={`/month/${nextMonth + 1}`}>
-          <ArrowRight />
-        </ArrowButton>
-      </ShadowBox>
       <Tabs
         value={foodType}
         onChange={(_, value) => handleChange(value)}
         variant="fullWidth"
-        sx={{ fontWeight: 700, mt: 1 }}
+        sx={{ fontWeight: 700 }}
         aria-label="tabs for the selection of fruits, vegetables or others"
       >
         <Tab
diff --git a/src/routes/FoodPage.tsx b/src/routes/FoodPage.tsx
index d74d3c9..83e6a2a 100644
--- a/src/routes/FoodPage.tsx
+++ b/src/routes/FoodPage.tsx
@@ -55,16 +55,14 @@ export default function FoodPage() {
     }
   };
 
-  const GridBox = styled(Box)(({ theme }) => ({
-    width: 80,
-    padding: 10,
-    aspectRatio: 2,
+  const GridBox = styled(Link)(({ theme }) => ({
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    fontFamily: "Sans",
+    flexGrow: 1,
+    padding: 2,
+    width: '25%',
     [theme.breakpoints.up('md')]: {
-      width: 200,
       fontSize: '1.125rem',
       fontWeight: '400'
     },
@@ -83,23 +81,22 @@ export default function FoodPage() {
     return months.map((month) => {
       let userNumber = Number(month) + 1;
       return (
-          <Link to={`/month/${userNumber}`}>
-            <GridBox sx={{ ...monthColor(month), m: 1 }}>
-              <div >{t(`month_${month}`)}</div>
-            </GridBox>
-          </Link>
+        <GridBox key={month} sx={{ ...monthColor(month), m: 1 }} to={`/month/${userNumber}`}>
+          <Typography>{t(`month_${month}`)}</Typography>
+        </GridBox>
       );
     });
   };
 
   return (
     <Stack
-      justifyContent="space-between"
       width="100%"
+      height="100%"
       overflow="auto"
+      my={1.5}
     >
       <Stack direction="row" width="100%">
-        <ImgBox>
+        <ImgBox borderRadius={1}>
           <img
             className="food-image"
             src={`../images/${image}.png`}
@@ -126,12 +123,10 @@ export default function FoodPage() {
             color={seasonStatus === "FoodPage_inSeasonText" ? "secondary.main" : "primary.main"}>
             {t(seasonStatus)}
           </Typography>
-         
         </Stack>
       </Stack>
       <Typography
         variant="h5"
-        textAlign="center"
         mt={3}
         sx={{ fontWeight: 700 }}
         color="secondary.dark"
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index 0468a96..7d63f7e 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -1,5 +1,5 @@
 import type { FoodList } from "../types/food";
-import { Outlet } from "react-router-dom";
+import { Link, Outlet, useParams } from "react-router-dom";
 import { useState } from "react";
 import HeaderBar from "../components/HeaderBar";
 import SearchResult from "../components/SearchResult";
@@ -12,8 +12,13 @@ import {
   Drawer,
   ThemeProvider,
   Stack,
+  Typography,
+  styled,
+  alpha,
 } from "@mui/material";
 import SideBarDialog from "../components/SideBarDialog";
+import { ArrowLeft, ArrowRight } from "@mui/icons-material";
+import { t } from "i18next";
 
 //BASIC MUI COLORS AND BREAKPOINTS
 const theme = createTheme({
@@ -47,6 +52,9 @@ const theme = createTheme({
 });
 
 function Layout({ food }: { food: FoodList }) {
+  const { selectedMonthNum } = useParams();
+  const monthNum = Number(selectedMonthNum) - 1;
+
   //search bar code
   const [ifSearched, setIfSearched] = useState(false);
   const [searchResults, setSearchResults] = useState([] as FoodList);
@@ -73,6 +81,26 @@ function Layout({ food }: { food: FoodList }) {
     setDialogType(itemClickedName);
   };
 
+    //variables to change month when pressing the arrows
+    const prevMonth = monthNum != 0 ? monthNum - 1 : 11;
+    const nextMonth = monthNum != 11 ? monthNum + 1 : 0;
+
+    //styled MUI arrows
+    const ArrowButton = styled(Link)(({ theme }) => ({
+      color: alpha(theme.palette.primary.light, 0.75),
+      "&:hover": {
+        color: alpha(theme.palette.primary.light, 0.95),
+      },
+      display: "flex",
+      alignItems: "center",
+      margin: theme.spacing(1),
+      width: "auto",
+    }));
+
+  const ShadowBox = styled(Stack)(({ theme }) => ({
+    boxShadow: `0 2px 4px ${theme.palette.secondary}`,
+  }));
+
   return (
     <ThemeProvider theme={theme}>
       <Drawer open={state} onClick={toggleDrawer}>
@@ -85,6 +113,26 @@ function Layout({ food }: { food: FoodList }) {
           food={food}
           ifSearched={ifSearched}
         />
+        <ShadowBox
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+          bgcolor="secondary.main"
+          color="primary.light"
+          boxShadow="0 2px 4px #332323"
+        >
+          <ArrowButton to={`/month/${prevMonth + 1}`}>
+            <ArrowLeft />
+          </ArrowButton>
+          <Link to={`/month/${selectedMonthNum}`}>
+            <Typography variant="h6" display="flex" alignItems="center">
+              {t(`month_${monthNum}`)}
+            </Typography>
+          </Link>
+          <ArrowButton to={`/month/${nextMonth + 1}`}>
+            <ArrowRight />
+          </ArrowButton>
+        </ShadowBox>
         {ifSearched ? (
           <SearchResult
             searchResults={searchResults}

From fe0b8e061a2266bb19a29dbd90ddfc672dac299e Mon Sep 17 00:00:00 2001
From: Elena Volpato <talkto@elenavolpato.me>
Date: Thu, 17 Aug 2023 14:08:02 +0200
Subject: [PATCH 3/6] Update README.md

---
 README.md | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 664595d..6261bfd 100644
--- a/README.md
+++ b/README.md
@@ -1,11 +1,13 @@
 ## About the app
-This project was developed to address a genuine challenge: determining the availability of fruits and vegetables in a new country or region. Despite searching for solutions and information, I           couldn't find anything intuitive or capable of meeting my needs.
+This project was developed to address a genuine challenge: determining the availability of fruits and vegetables in a new country or region. Despite searching for solutions and information, we couldn't find anything intuitive or capable of meeting my needs.
        
 The concept behind this project was to create a simple and scalable solution, making it easy to modify and expand the database for different countries or regions. The primary objective of this app is to promote the consumption of locally grown produce, empower small-scale farmers, and ultimately reduce our contribution to global warming.
 
+The project is written in React/Typescript, using [MUI](https://mui.com/) library for the UI. The Android app is built using [Capacitor](https://capacitorjs.com/).
+
 ## First Release (August 2023)
 
-This first release has only data for one co, for now, the data is **only for Italy**. 
+This first release has only data for one country, for now, the data is **only for Italy**. 
 
 Also in this initial release we have a web version and an Android app, also available in English and Italian. 
 
@@ -23,7 +25,6 @@ Source of data for fruits and vegetables from [Slow Food Italy](https://www.slow
 
 ![season-fruit](assets/print-1.jpg)
 
-The project is written in React/Typescript using [MUI](https://mui.com/) library for the UI. The Android app is built using [Capacitor](https://capacitorjs.com/).
 
 # How to use
 
@@ -41,4 +42,4 @@ There is a online web version[here](https://fuzue.tech/seasonalfood/). The homep
 First you do need to have Android SDK and Android Studio installed. After that you can open the project in Android Studio with:
 
 1. npm run build-app
-2. ANDROID_SDK=the-path-top-android-sdk CAPACITOR_ANDROID_STUDIO_PATH=the-path-to-android-studio/bin/studio.sh npm run run-app-android
\ No newline at end of file
+2. ANDROID_SDK=the-path-top-android-sdk CAPACITOR_ANDROID_STUDIO_PATH=the-path-to-android-studio/bin/studio.sh npm run run-app-android

From 4c5849b2fb09a639ad1682f073f39b5ad75187c3 Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Thu, 17 Aug 2023 14:34:34 -0300
Subject: [PATCH 4/6] feat(MonthBar): add month and return bar

---
 src/App.tsx                 |  2 +-
 src/components/Item.tsx     |  5 ++-
 src/components/MonthBar.tsx | 66 +++++++++++++++++++++++++++++++++++++
 src/routes/Layout.tsx       | 47 ++------------------------
 4 files changed, 71 insertions(+), 49 deletions(-)
 create mode 100644 src/components/MonthBar.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 88271c0..6fdf42e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -28,7 +28,7 @@ export default function App() {
                 element={<Navigate to={`/month/${currentMonth}`} replace />}
               />
               <Route
-                path="/:id/:selectedMonthNum"
+                path="/:id"
                 element={<FoodPage key="foodpage"/>}
               />
               <Route
diff --git a/src/components/Item.tsx b/src/components/Item.tsx
index 07398f2..f7cf751 100644
--- a/src/components/Item.tsx
+++ b/src/components/Item.tsx
@@ -1,6 +1,6 @@
 import type { FoodObject } from "../types/food";
 
-import { Link, useParams } from "react-router-dom";
+import { Link } from "react-router-dom";
 import { Box, Stack, Typography, styled } from "@mui/material";
 import { useTranslation } from "react-i18next";
 
@@ -17,12 +17,11 @@ const ImgBox = styled(Stack)(({ theme }) => ({
 function Item(props: FoodObject) {
   const { t } = useTranslation();
   const image = props.image.toLowerCase();
-  const { selectedMonthNum } = useParams();
   return (
     <Box
       sx={{ flexGrow: 1, width: "100%", maxWidth: "30%", minWidth: 90 }}
     >
-      <Link to={`/${props.description[0].slug}/${selectedMonthNum}`}>
+      <Link to={`/${props.description[0].slug}`}>
         <ImgBox>
           <Box position="relative" flexGrow={1}>
             <img
diff --git a/src/components/MonthBar.tsx b/src/components/MonthBar.tsx
new file mode 100644
index 0000000..f0a31b0
--- /dev/null
+++ b/src/components/MonthBar.tsx
@@ -0,0 +1,66 @@
+import { ArrowLeft, ArrowRight } from "@mui/icons-material";
+import { Stack, Typography, alpha, styled } from "@mui/material";
+import { t } from "i18next";
+import { Fragment } from "react";
+import { Link, useParams } from "react-router-dom";
+
+const MonthBar = () => {
+  const { selectedMonthNum } = useParams();
+  const monthNum = Number(selectedMonthNum) - 1;
+
+  //variables to change month when pressing the arrows
+  const prevMonth = monthNum != 0 ? monthNum - 1 : 11;
+  const nextMonth = monthNum != 11 ? monthNum + 1 : 0;
+
+  //styled MUI arrows
+  const ArrowButton = styled(Link)(({ theme }) => ({
+    color: alpha(theme.palette.primary.light, 0.75),
+    "&:hover": {
+      color: alpha(theme.palette.primary.light, 0.95),
+    },
+    display: "flex",
+    alignItems: "center",
+    margin: theme.spacing(1),
+    width: "auto",
+  }));
+
+  const ShadowBox = styled(Stack)(({ theme }) => ({
+    boxShadow: `0 2px 4px ${theme.palette.secondary}`,
+  }));
+
+  return (
+    <ShadowBox
+      direction="row"
+      alignItems="center"
+      justifyContent="space-between"
+      bgcolor="secondary.main"
+      color="primary.light"
+      boxShadow="0 2px 4px #332323"
+    >
+      {selectedMonthNum ? (
+        <Fragment>
+          <ArrowButton to={`/month/${prevMonth + 1}`}>
+            <ArrowLeft />
+          </ArrowButton>
+          <Link to={`/month/${selectedMonthNum}`}>
+            <Typography variant="h6" display="flex" alignItems="center">
+              {t(`month_${monthNum}`)}
+            </Typography>
+          </Link>
+          <ArrowButton to={`/month/${nextMonth + 1}`}>
+            <ArrowRight />
+          </ArrowButton>
+        </Fragment>
+      ) : (
+        <Fragment>
+          <ArrowButton to={`/`}>
+            <ArrowLeft />
+            <Typography>Return to current month</Typography>
+          </ArrowButton>
+        </Fragment>
+      )}
+    </ShadowBox>
+  );
+};
+
+export default MonthBar;
diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index 7d63f7e..0a1195c 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -12,13 +12,11 @@ import {
   Drawer,
   ThemeProvider,
   Stack,
-  Typography,
   styled,
   alpha,
 } from "@mui/material";
 import SideBarDialog from "../components/SideBarDialog";
-import { ArrowLeft, ArrowRight } from "@mui/icons-material";
-import { t } from "i18next";
+import MonthBar from "../components/MonthBar";
 
 //BASIC MUI COLORS AND BREAKPOINTS
 const theme = createTheme({
@@ -52,8 +50,6 @@ const theme = createTheme({
 });
 
 function Layout({ food }: { food: FoodList }) {
-  const { selectedMonthNum } = useParams();
-  const monthNum = Number(selectedMonthNum) - 1;
 
   //search bar code
   const [ifSearched, setIfSearched] = useState(false);
@@ -81,26 +77,6 @@ function Layout({ food }: { food: FoodList }) {
     setDialogType(itemClickedName);
   };
 
-    //variables to change month when pressing the arrows
-    const prevMonth = monthNum != 0 ? monthNum - 1 : 11;
-    const nextMonth = monthNum != 11 ? monthNum + 1 : 0;
-
-    //styled MUI arrows
-    const ArrowButton = styled(Link)(({ theme }) => ({
-      color: alpha(theme.palette.primary.light, 0.75),
-      "&:hover": {
-        color: alpha(theme.palette.primary.light, 0.95),
-      },
-      display: "flex",
-      alignItems: "center",
-      margin: theme.spacing(1),
-      width: "auto",
-    }));
-
-  const ShadowBox = styled(Stack)(({ theme }) => ({
-    boxShadow: `0 2px 4px ${theme.palette.secondary}`,
-  }));
-
   return (
     <ThemeProvider theme={theme}>
       <Drawer open={state} onClick={toggleDrawer}>
@@ -113,26 +89,7 @@ function Layout({ food }: { food: FoodList }) {
           food={food}
           ifSearched={ifSearched}
         />
-        <ShadowBox
-          direction="row"
-          alignItems="center"
-          justifyContent="space-between"
-          bgcolor="secondary.main"
-          color="primary.light"
-          boxShadow="0 2px 4px #332323"
-        >
-          <ArrowButton to={`/month/${prevMonth + 1}`}>
-            <ArrowLeft />
-          </ArrowButton>
-          <Link to={`/month/${selectedMonthNum}`}>
-            <Typography variant="h6" display="flex" alignItems="center">
-              {t(`month_${monthNum}`)}
-            </Typography>
-          </Link>
-          <ArrowButton to={`/month/${nextMonth + 1}`}>
-            <ArrowRight />
-          </ArrowButton>
-        </ShadowBox>
+        <MonthBar />
         {ifSearched ? (
           <SearchResult
             searchResults={searchResults}

From 38c0b1b6619fe6d00181c508ffbde5c000ff8645 Mon Sep 17 00:00:00 2001
From: Eduardo Liron <eduardoliron@gmail.com>
Date: Fri, 18 Aug 2023 08:45:18 -0300
Subject: [PATCH 5/6] fix(Layout): remove unused imports

---
 src/routes/Layout.tsx | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/routes/Layout.tsx b/src/routes/Layout.tsx
index 0a1195c..e620a7c 100644
--- a/src/routes/Layout.tsx
+++ b/src/routes/Layout.tsx
@@ -1,5 +1,5 @@
 import type { FoodList } from "../types/food";
-import { Link, Outlet, useParams } from "react-router-dom";
+import { Outlet } from "react-router-dom";
 import { useState } from "react";
 import HeaderBar from "../components/HeaderBar";
 import SearchResult from "../components/SearchResult";
@@ -11,10 +11,8 @@ import {
   Box,
   Drawer,
   ThemeProvider,
-  Stack,
-  styled,
-  alpha,
-} from "@mui/material";
+  Stack
+  } from "@mui/material";
 import SideBarDialog from "../components/SideBarDialog";
 import MonthBar from "../components/MonthBar";
 

From 6bb683e8f46d56b7fca5ce0c8e48f7c1d2da4f24 Mon Sep 17 00:00:00 2001
From: "Edgar Z. Alvarenga" <e@vaz.io>
Date: Fri, 18 Aug 2023 14:20:43 +0200
Subject: [PATCH 6/6] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 621ac2a..9cbb3f8 100644
--- a/README.md
+++ b/README.md
@@ -18,7 +18,7 @@ Also in this initial release we have a web version and an Android app, also avai
 * 📊 Create new ways of visualizing the food in season information, with full year diagrams.
 * 🍇 🍉 🍑 🥝 🍒 Make it possible to select a group of fruits and vegetables and see all of them in a calendar.
 * 🔍 Add synonyms or variant names. Some fruits and vegetables have more than one name, depending of the country's region.
-*🛢Create a public dataset with all the information that we are gathering.
+* 🛢Create a public dataset with all the information that we are gathering.
 * 🍎 Release IOS version.
 * Write it in [Svelte](https://svelte.dev/)!