New/dynamic routes

src/meta/play-meta.js

@@ -21,6 +21,7 @@ import {
   Calendar,
   FunQuiz,
   TicTacToeGame,
+  DynamicRoutes,
   //import play here
 } from "plays";
 
@@ -370,5 +371,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
 ];

src/plays/dynamic-routes/Data.js

@@ -0,0 +1,45 @@
+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",
+  },
+];
+
+export default data;

src/plays/dynamic-routes/DynamicRoutes.jsx

@@ -0,0 +1,87 @@
+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">
+            <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>
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          {/* Your Code Ends Here */}
+        </div>
+      </div>
+    </>
+  );
+}
+
+export default DynamicRoutes;

src/plays/dynamic-routes/Navbar.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+function Navbar(props) {
+  const [mealTypes, activeMealHandler, activeMenu] = Object.values(props);
+  return (
+    <div className="navbar">
+      {mealTypes.map((mealtype, index) => {
+        return (
+          <NavLink
+            key={index}
+            to={`/plays/dynamic-routes/${mealtype}`}
+            className={`navbar-link ${activeMenu === mealtype ? "active" : ""}`}
+            onClick={() => activeMealHandler(mealtype)}
+          >
+            {mealtype}
+          </NavLink>
+        );
+      })}
+    </div>
+  );
+}
+
+export default Navbar;

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 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
+
+Update all considerations(if any)
+
+## Resources
+
+This youtube video and bit of my own practice helped me.
+https://www.youtube.com/watch?v=0cSVuySEB0A

src/plays/dynamic-routes/dynamicRoutes.css

@@ -0,0 +1,85 @@
+/* enter stlyes here */
+.dynamic-routes-container {
+  width: 100%;
+  max-width: 700px;
+  margin: 50px auto;
+}
+
+.dynamic-routes-container .heading,
+.dynamic-routes-container .sub-heading,
+.dynamic-routes-container .navbar {
+  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 {
+  max-width: 300px;
+  width: 250px;
+  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;
+}
+.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%;
+  }
+}

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 {

src/plays/index.js

@@ -21,5 +21,6 @@ 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 Quizeo } from 'plays/quizeo/src/Quizeo';
+export { default as DynamicRoutes } from "plays/dynamic-routes/DynamicRoutes";
+export { default as Quizeo } from "plays/quizeo/src/Quizeo";
 //add export here