From 2ed5cf20db20f9579dbdc993d9308525948a43dc Mon Sep 17 00:00:00 2001
From: Deepak8717 <sendit2deepak@gmail.com>
Date: Wed, 25 May 2022 21:56:27 +0530
Subject: [PATCH 1/6] a new project to learn about dynamic routes

---
 src/meta/play-meta.js                        |  19 ++++-
 src/plays/dynamic-routes/Data.js             |  32 ++++++++
 src/plays/dynamic-routes/DynamicRoutes.jsx   |  76 +++++++++++++++++++
 src/plays/dynamic-routes/Navbar.jsx          |  26 +++++++
 src/plays/dynamic-routes/Readme.md           |  29 +++++++
 src/plays/dynamic-routes/cover.png           | Bin 0 -> 37729 bytes
 src/plays/dynamic-routes/dynamicRoutes.css   |  64 ++++++++++++++++
 src/plays/expanding-cards/ExpandingCards.css |   4 +-
 src/plays/index.js                           |   1 +
 9 files changed, 248 insertions(+), 3 deletions(-)
 create mode 100644 src/plays/dynamic-routes/Data.js
 create mode 100644 src/plays/dynamic-routes/DynamicRoutes.jsx
 create mode 100644 src/plays/dynamic-routes/Navbar.jsx
 create mode 100644 src/plays/dynamic-routes/Readme.md
 create mode 100644 src/plays/dynamic-routes/cover.png
 create mode 100644 src/plays/dynamic-routes/dynamicRoutes.css

diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js
index 6b6e696209..31b9254892 100644
--- a/src/meta/play-meta.js
+++ b/src/meta/play-meta.js
@@ -20,6 +20,7 @@ import {
   Calendar,
   FunQuiz,
   TicTacToeGame,
+  DynamicRoutes,
   //import play here
 } from "plays";
 
@@ -355,5 +356,21 @@ export const plays = [
     video: "",
     language: "js",
   },
-  //replace new play item here
+  {
+    id: "pl-dynamic-routes",
+    name: "Dynamic-Routes",
+    description:
+      "We will learn how to pass dynamic route/input in url and based on url the output on the screen changes",
+    component: () => {
+      return <DynamicRoutes />;
+    },
+    path: "/plays/dynamic-routes/:menu",
+    level: "Beginner",
+    tags: "react-router-v6,dynamic-routing,useParam-hook",
+    github: "Deepak8717",
+    cover: "",
+    blog: "",
+    video: "",
+    language: "js",
+  }, //replace new play item here
 ];
diff --git a/src/plays/dynamic-routes/Data.js b/src/plays/dynamic-routes/Data.js
new file mode 100644
index 0000000000..c216fd9a5e
--- /dev/null
+++ b/src/plays/dynamic-routes/Data.js
@@ -0,0 +1,32 @@
+const data = [
+  {
+    name: "Omelette",
+    mealtype: "breakfast",
+  },
+  {
+    name: "Stir Fried Tofu with Rice",
+    mealtype: "lunch",
+  },
+  {
+    name: "Roasted Cauliflower",
+    mealtype: "dinner",
+  },
+  {
+    name: "toast butter",
+    mealtype: "breakfast",
+  },
+  {
+    name: "Baked Oatmeal",
+    mealtype: "breakfast",
+  },
+  {
+    name: "Tawa Pulao",
+    mealtype: "lunch",
+  },
+  {
+    name: "channa masala",
+    mealtype: "dinner",
+  },
+];
+
+export default data;
diff --git a/src/plays/dynamic-routes/DynamicRoutes.jsx b/src/plays/dynamic-routes/DynamicRoutes.jsx
new file mode 100644
index 0000000000..545635e02c
--- /dev/null
+++ b/src/plays/dynamic-routes/DynamicRoutes.jsx
@@ -0,0 +1,76 @@
+import { getPlayById } from "meta/play-meta-util";
+import PlayHeader from "common/playlists/PlayHeader";
+import { useParams } from "react-router-dom";
+import Navbar from "./Navbar";
+import "./dynamicRoutes.css";
+import data from "./Data";
+import { useState } from "react";
+
+function DynamicRoutes(props) {
+  // Do not remove the below lines.
+  // The following code is to fetch the current play from the URL
+  const { id } = props;
+  const play = getPlayById(id);
+
+  // Your Code Start below.
+  let { menu } = useParams(); // return the parameter of url
+  const [activeMenu, setActiveMenu] = useState(
+    menu === ":menu" ? "breakfast" : menu
+    //we take url input and set to our activeMenu state so we can fetch recipes based on active menu
+    //if its first laod then url parameter is ":menu" so we change the active menu to "breakfast" as default category
+  );
+
+  const activeRecipes = data.filter((recipe) => {
+    return recipe.mealtype === activeMenu; //filter reciepes based on active menu
+  });
+
+  const mealType = [];
+  data.map((recipe) => {
+    return mealType.push(recipe.mealtype); //push  meal categories to an array
+  });
+
+  const uniqMealType = [...new Set(mealType)]; // eliminate duplicate categories so we can render a navbar of uniq categories
+
+  const activeMenuHandler = (mealtype) => {
+    setActiveMenu(mealtype);
+  };
+  return (
+    <>
+      <div className="play-details">
+        <PlayHeader play={play} />
+        <div className="play-details-body">
+          {/* Your Code Starts Here */}
+          <div className="dynamic-routes-container">
+            <h1 className="heading">React Dynamic Routes</h1>
+            <h3 className="sub-heading">
+              Click the navbar or chnage the url
+              <small className="example"> (e.g. &nbsp; url/breakfast)</small>
+            </h3>
+            <Navbar //passing unique meal type to render on the navbar
+              mealtype={uniqMealType}
+              activeMenuHandler={activeMenuHandler} //a clickhandler that will reset the active menu
+            />
+            <div className="recipe-container">
+              {activeRecipes.map((recipe) => {
+                //render the recipes based on active menu
+                return (
+                  <div className="recipe-card ">
+                    <div>
+                      <h4>{recipe.name}</h4>
+                    </div>
+                    <div className={`symbol ${recipe.mealtype}`}>
+                      {recipe.mealtype}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default DynamicRoutes;
diff --git a/src/plays/dynamic-routes/Navbar.jsx b/src/plays/dynamic-routes/Navbar.jsx
new file mode 100644
index 0000000000..8a3bbced7b
--- /dev/null
+++ b/src/plays/dynamic-routes/Navbar.jsx
@@ -0,0 +1,26 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+function Navbar(props) {
+  const [mealTypes, activeMealHandler] = Object.values(props);
+  return (
+    <div className="navbar">
+      {mealTypes.map((mealtype, index) => {
+        return (
+          <NavLink
+            key={index}
+            to={`/plays/dynamic-routes/${mealtype}`}
+            className={
+              'navbar-link ({ isActive }) => (isActive ? "active" : "")'
+            }
+            onClick={() => activeMealHandler(mealtype)}
+          >
+            {mealtype}
+          </NavLink>
+        );
+      })}
+    </div>
+  );
+}
+
+export default Navbar;
diff --git a/src/plays/dynamic-routes/Readme.md b/src/plays/dynamic-routes/Readme.md
new file mode 100644
index 0000000000..32f31c1a31
--- /dev/null
+++ b/src/plays/dynamic-routes/Readme.md
@@ -0,0 +1,29 @@
+# dynamic-routes
+
+learn to pass dynamic routes and change the data based on url input
+
+## Play Demographic
+
+Language: js
+Level: Beginner
+
+## Creator Information
+
+User: Deepak8717
+Gihub Link: https://github.com/Deepak8717
+Blog:
+Video:
+
+## Implementation Details
+
+to get the url input paramete value we need to tweak the path of the this project in the play-mets.js file
+from ""/plays/dynamic-routes/" to "/plays/dynamic-routes/:menu"
+we need to use useParams() hook to get the input value of url and pass to our filter function we can fetch the recipes based input value. if our input matches the meal categories. we show the data on screen.
+
+## Consideration
+
+Update all considerations(if any)
+
+## Resources
+
+Update external resources(if any)
diff --git a/src/plays/dynamic-routes/cover.png b/src/plays/dynamic-routes/cover.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fd826601ad247e1233cbdfe0932928daee1278c
GIT binary patch
diff --git a/src/plays/dynamic-routes/dynamicRoutes.css b/src/plays/dynamic-routes/dynamicRoutes.css
new file mode 100644
index 0000000000..e5e6f0ce74
--- /dev/null
+++ b/src/plays/dynamic-routes/dynamicRoutes.css
@@ -0,0 +1,64 @@
+/* enter stlyes here */
+.dynamic-routes-container {
+  width: 90%;
+  max-width: 700px;
+  margin: 50px auto;
+}
+.dynamic-routes-container .heading,
+.dynamic-routes-container .sub-heading {
+  text-align: center;
+}
+.dynamic-routes-container .navbar {
+  display: flex;
+  justify-content: center;
+}
+.dynamic-routes-container .example {
+  font-weight: 300;
+}
+.dynamic-routes-container .recipe-container {
+  display: flex;
+  justify-content: center;
+  margin: 50px auto;
+}
+.dynamic-routes-container .recipe-card {
+  width: 300px;
+  background-color: rgb(228 228 231);
+  margin: 20px;
+  text-align: center;
+  padding: 20px;
+  border-top-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  text-transform: capitalize;
+}
+.dynamic-routes-container .active {
+  background-color: aqua;
+}
+.dynamic-routes-container .navbar-link {
+  width: 100px;
+  padding: 2px 5px;
+  margin: 0 10px;
+  text-decoration: none;
+  text-transform: capitalize;
+  border-radius: 10px;
+  text-align: center;
+  box-shadow: 1px 2px 5px #ccc;
+}
+
+.dynamic-routes-container .symbol {
+  width: 100px;
+  padding: 5px;
+  border-radius: 20px;
+  margin: 0 auto;
+}
+.dynamic-routes-container .breakfast {
+  background: green;
+  color: #fff;
+}
+.dynamic-routes-container .lunch {
+  background: #f33636;
+  color: #fff;
+}
+
+.dynamic-routes-container .dinner {
+  background: #d7ca12;
+}
diff --git a/src/plays/expanding-cards/ExpandingCards.css b/src/plays/expanding-cards/ExpandingCards.css
index e6a22904a9..6fca6f3c7e 100644
--- a/src/plays/expanding-cards/ExpandingCards.css
+++ b/src/plays/expanding-cards/ExpandingCards.css
@@ -20,7 +20,7 @@
   -webkit-backface-visibility: hidden;
 }
 
-.active {
+.card-container .active {
   width: 600px;
 }
 .Expanding-card-imgage {
@@ -59,7 +59,7 @@
     height: 50px;
     transition: height 1s;
   }
-  .active {
+  .card-container .active {
     height: 250px;
   }
   .active .Expanding-card-imgage {
diff --git a/src/plays/index.js b/src/plays/index.js
index 213051c72f..7c6706a869 100644
--- a/src/plays/index.js
+++ b/src/plays/index.js
@@ -21,3 +21,4 @@ export { default as RegistrationForm } from "plays/registration-form/Registratio
 export { default as Calendar } from "plays/calendar/Calendar";
 export { default as FunQuiz } from "plays/fun-quiz/FunQuiz";
 export { default as TicTacToeGame } from "plays/tic-tac-toe-game/TicTacToeGame";
+export { default as DynamicRoutes } from "plays/dynamic-routes/DynamicRoutes";

From 1f4b9c6d7746039d8572e53f7c0e7e42257e1d04 Mon Sep 17 00:00:00 2001
From: Deepak8717 <sendit2deepak@gmail.com>
Date: Wed, 25 May 2022 22:05:53 +0530
Subject: [PATCH 2/6] fixed the warnings

---
 src/plays/dynamic-routes/DynamicRoutes.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plays/dynamic-routes/DynamicRoutes.jsx b/src/plays/dynamic-routes/DynamicRoutes.jsx
index 545635e02c..63033b5ede 100644
--- a/src/plays/dynamic-routes/DynamicRoutes.jsx
+++ b/src/plays/dynamic-routes/DynamicRoutes.jsx
@@ -51,10 +51,10 @@ function DynamicRoutes(props) {
               activeMenuHandler={activeMenuHandler} //a clickhandler that will reset the active menu
             />
             <div className="recipe-container">
-              {activeRecipes.map((recipe) => {
+              {activeRecipes.map((recipe, index) => {
                 //render the recipes based on active menu
                 return (
-                  <div className="recipe-card ">
+                  <div className="recipe-card " key={index}>
                     <div>
                       <h4>{recipe.name}</h4>
                     </div>

From 64d09eaf4de8c7e0017bcd30b46891f2533f4d96 Mon Sep 17 00:00:00 2001
From: Deepak8717 <sendit2deepak@gmail.com>
Date: Fri, 27 May 2022 09:12:36 +0530
Subject: [PATCH 3/6] fix initial menu selection/added images to data.js/spell
 correction readme/updated cover/fixed responsiveness/

---
 src/plays/dynamic-routes/Data.js           |  13 +++++++++
 src/plays/dynamic-routes/DynamicRoutes.jsx |  29 ++++++++++++++-------
 src/plays/dynamic-routes/Navbar.jsx        |   6 ++---
 src/plays/dynamic-routes/Readme.md         |   4 +--
 src/plays/dynamic-routes/cover.png         | Bin 37729 -> 91618 bytes
 src/plays/dynamic-routes/dynamicRoutes.css |  27 ++++++++++++++++---
 6 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/src/plays/dynamic-routes/Data.js b/src/plays/dynamic-routes/Data.js
index c216fd9a5e..40b85b09f1 100644
--- a/src/plays/dynamic-routes/Data.js
+++ b/src/plays/dynamic-routes/Data.js
@@ -2,30 +2,43 @@ const data = [
   {
     name: "Omelette",
     mealtype: "breakfast",
+    image:
+      "https://www.indianhealthyrecipes.com/wp-content/uploads/2021/06/cheese-omelette-mozarella-omelette.jpg",
   },
   {
     name: "Stir Fried Tofu with Rice",
     mealtype: "lunch",
+    image:
+      "https://www.myweekendkitchen.in/wp-content/uploads/2018/10/tofu_stir_fry_tofu_pulao.jpg",
   },
   {
     name: "Roasted Cauliflower",
     mealtype: "dinner",
+    image:
+      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSilH81ideZ64mi8r1FO-75OHrJt93wgIw55w&usqp=CAU",
   },
   {
     name: "toast butter",
     mealtype: "breakfast",
+    image:
+      "https://thumbs.dreamstime.com/b/toast-jam-black-background-5588967.jpg",
   },
   {
     name: "Baked Oatmeal",
     mealtype: "breakfast",
+    image:
+      "https://fitfoodiefinds.com/wp-content/uploads/2015/10/classic-oatmeal.jpg",
   },
   {
     name: "Tawa Pulao",
     mealtype: "lunch",
+    image: "https://www.masala.tv/wp-content/uploads/2017/06/1-16.jpg",
   },
   {
     name: "channa masala",
     mealtype: "dinner",
+    image:
+      "https://www.indianveggiedelight.com/wp-content/uploads/2019/05/chana-masala-instant-pot-feature-image.jpg",
   },
 ];
 
diff --git a/src/plays/dynamic-routes/DynamicRoutes.jsx b/src/plays/dynamic-routes/DynamicRoutes.jsx
index 63033b5ede..1344b1ab27 100644
--- a/src/plays/dynamic-routes/DynamicRoutes.jsx
+++ b/src/plays/dynamic-routes/DynamicRoutes.jsx
@@ -41,23 +41,34 @@ function DynamicRoutes(props) {
         <div className="play-details-body">
           {/* Your Code Starts Here */}
           <div className="dynamic-routes-container">
-            <h1 className="heading">React Dynamic Routes</h1>
-            <h3 className="sub-heading">
-              Click the navbar or chnage the url
-              <small className="example"> (e.g. &nbsp; url/breakfast)</small>
-            </h3>
-            <Navbar //passing unique meal type to render on the navbar
-              mealtype={uniqMealType}
-              activeMenuHandler={activeMenuHandler} //a clickhandler that will reset the active menu
-            />
+            <div className="header">
+              <h1 className="heading">React Dynamic Routes</h1>
+              <h3 className="sub-heading">
+                Click the navbar or chnage the url
+                <small className="example"> (e.g. &nbsp; url/breakfast)</small>
+              </h3>
+              <Navbar //passing unique meal type to render on the navbar
+                mealtype={uniqMealType}
+                activeMenuHandler={activeMenuHandler}
+                activeMenu={activeMenu} //a clickhandler that will reset the active menu
+              />
+            </div>
+
             <div className="recipe-container">
+              {activeRecipes.length <= 0 ? <>Sorry, check the url</> : ""}
               {activeRecipes.map((recipe, index) => {
                 //render the recipes based on active menu
+
                 return (
                   <div className="recipe-card " key={index}>
                     <div>
                       <h4>{recipe.name}</h4>
                     </div>
+                    <img
+                      className="image"
+                      src={recipe.image}
+                      alt={recipe.name}
+                    />
                     <div className={`symbol ${recipe.mealtype}`}>
                       {recipe.mealtype}
                     </div>
diff --git a/src/plays/dynamic-routes/Navbar.jsx b/src/plays/dynamic-routes/Navbar.jsx
index 8a3bbced7b..939b9314b3 100644
--- a/src/plays/dynamic-routes/Navbar.jsx
+++ b/src/plays/dynamic-routes/Navbar.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { NavLink } from "react-router-dom";
 
 function Navbar(props) {
-  const [mealTypes, activeMealHandler] = Object.values(props);
+  const [mealTypes, activeMealHandler, activeMenu] = Object.values(props);
   return (
     <div className="navbar">
       {mealTypes.map((mealtype, index) => {
@@ -10,9 +10,7 @@ function Navbar(props) {
           <NavLink
             key={index}
             to={`/plays/dynamic-routes/${mealtype}`}
-            className={
-              'navbar-link ({ isActive }) => (isActive ? "active" : "")'
-            }
+            className={`navbar-link ${activeMenu === mealtype ? "active" : ""}`}
             onClick={() => activeMealHandler(mealtype)}
           >
             {mealtype}
diff --git a/src/plays/dynamic-routes/Readme.md b/src/plays/dynamic-routes/Readme.md
index 32f31c1a31..792818bc56 100644
--- a/src/plays/dynamic-routes/Readme.md
+++ b/src/plays/dynamic-routes/Readme.md
@@ -16,9 +16,9 @@ Video:
 
 ## Implementation Details
 
-to get the url input paramete value we need to tweak the path of the this project in the play-mets.js file
+to get the url input parameter value we need to tweak the path of the this project in the play-metas.js file
 from ""/plays/dynamic-routes/" to "/plays/dynamic-routes/:menu"
-we need to use useParams() hook to get the input value of url and pass to our filter function we can fetch the recipes based input value. if our input matches the meal categories. we show the data on screen.
+we need to use useParams() hook to get the input value of url and pass to function that filter the data so we can fetch the recipes based input value. if our input matches the meal categories. we show the data on screen.
 
 ## Consideration
 
diff --git a/src/plays/dynamic-routes/cover.png b/src/plays/dynamic-routes/cover.png
index 5fd826601ad247e1233cbdfe0932928daee1278c..f5079ac09aa8e9cdba31f6ccfac2e077e5996d91 100644
GIT binary patch
diff --git a/src/plays/dynamic-routes/dynamicRoutes.css b/src/plays/dynamic-routes/dynamicRoutes.css
index e5e6f0ce74..8a549c2d85 100644
--- a/src/plays/dynamic-routes/dynamicRoutes.css
+++ b/src/plays/dynamic-routes/dynamicRoutes.css
@@ -1,11 +1,13 @@
 /* enter stlyes here */
 .dynamic-routes-container {
-  width: 90%;
+  width: 100%;
   max-width: 700px;
   margin: 50px auto;
 }
+
 .dynamic-routes-container .heading,
-.dynamic-routes-container .sub-heading {
+.dynamic-routes-container .sub-heading,
+.dynamic-routes-container .navbar {
   text-align: center;
 }
 .dynamic-routes-container .navbar {
@@ -21,7 +23,8 @@
   margin: 50px auto;
 }
 .dynamic-routes-container .recipe-card {
-  width: 300px;
+  max-width: 300px;
+  width: 250px;
   background-color: rgb(228 228 231);
   margin: 20px;
   text-align: center;
@@ -62,3 +65,21 @@
 .dynamic-routes-container .dinner {
   background: #d7ca12;
 }
+.dynamic-routes-container .image {
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+}
+@media screen and (max-width: 520px) {
+  .dynamic-routes-container .recipe-container {
+    flex-direction: column;
+  }
+  .dynamic-routes-container .recipe-card {
+    margin: 20px auto;
+  }
+  .dynamic-routes-container .image {
+    width: 100%;
+    height: auto;
+    border-radius: 50%;
+  }
+}

From 37d9831100deeed78be001f3db76e9405af69881 Mon Sep 17 00:00:00 2001
From: Deepak8717 <sendit2deepak@gmail.com>
Date: Fri, 27 May 2022 12:36:13 +0530
Subject: [PATCH 4/6] added the resource link

---
 src/plays/dynamic-routes/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plays/dynamic-routes/Readme.md b/src/plays/dynamic-routes/Readme.md
index 792818bc56..91cb11f17c 100644
--- a/src/plays/dynamic-routes/Readme.md
+++ b/src/plays/dynamic-routes/Readme.md
@@ -26,4 +26,4 @@ Update all considerations(if any)
 
 ## Resources
 
-Update external resources(if any)
+https://www.youtube.com/watch?v=0cSVuySEB0A

From 766794888ca39e640e2c0de38bc19b20dd6b8cd5 Mon Sep 17 00:00:00 2001
From: Deepak8717 <sendit2deepak@gmail.com>
Date: Fri, 27 May 2022 12:38:41 +0530
Subject: [PATCH 5/6] corrected implementation details

---
 src/plays/dynamic-routes/Readme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/plays/dynamic-routes/Readme.md b/src/plays/dynamic-routes/Readme.md
index 91cb11f17c..c5319b4919 100644
--- a/src/plays/dynamic-routes/Readme.md
+++ b/src/plays/dynamic-routes/Readme.md
@@ -16,8 +16,7 @@ Video:
 
 ## Implementation Details
 
-to get the url input parameter value we need to tweak the path of the this project in the play-metas.js file
-from ""/plays/dynamic-routes/" to "/plays/dynamic-routes/:menu"
+to get the url input parameter value we need to tweak the path of the this project in the play-metas.js file to "/plays/dynamic-routes/:menu"
 we need to use useParams() hook to get the input value of url and pass to function that filter the data so we can fetch the recipes based input value. if our input matches the meal categories. we show the data on screen.
 
 ## Consideration
@@ -26,4 +25,5 @@ Update all considerations(if any)
 
 ## Resources
 
+This youtube video and bit of my own practice helped me.
 https://www.youtube.com/watch?v=0cSVuySEB0A

From b23d6b5ba00105945bc5bc6d436c934130843cbf Mon Sep 17 00:00:00 2001
From: Deepak8717 <sendit2deepak@gmail.com>
Date: Fri, 27 May 2022 15:11:44 +0530
Subject: [PATCH 6/6] fixed implementation details

---
 src/plays/dynamic-routes/Readme.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/plays/dynamic-routes/Readme.md b/src/plays/dynamic-routes/Readme.md
index c5319b4919..84e87419a8 100644
--- a/src/plays/dynamic-routes/Readme.md
+++ b/src/plays/dynamic-routes/Readme.md
@@ -16,7 +16,7 @@ Video:
 
 ## Implementation Details
 
-to get the url input parameter value we need to tweak the path of the this project in the play-metas.js file to "/plays/dynamic-routes/:menu"
+to get the url input parameter value we need to tweak the path of the this project in the play-meta.js file to "/plays/dynamic-routes/:menu"
 we need to use useParams() hook to get the input value of url and pass to function that filter the data so we can fetch the recipes based input value. if our input matches the meal categories. we show the data on screen.
 
 ## Consideration
