diff --git a/src/meta/play-meta.js b/src/meta/play-meta.js index e3fc98a34e..b01aa7f1d4 100644 --- a/src/meta/play-meta.js +++ b/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 ; + }, + 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..40b85b09f1 --- /dev/null +++ b/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; diff --git a/src/plays/dynamic-routes/DynamicRoutes.jsx b/src/plays/dynamic-routes/DynamicRoutes.jsx new file mode 100644 index 0000000000..1344b1ab27 --- /dev/null +++ b/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 ( + <> +
+ +
+ {/* Your Code Starts Here */} +
+
+

React Dynamic Routes

+

+ Click the navbar or chnage the url + (e.g.   url/breakfast) +

+ +
+ +
+ {activeRecipes.length <= 0 ? <>Sorry, check the url : ""} + {activeRecipes.map((recipe, index) => { + //render the recipes based on active menu + + return ( +
+
+

{recipe.name}

+
+ {recipe.name} +
+ {recipe.mealtype} +
+
+ ); + })} +
+
+ {/* Your Code Ends Here */} +
+
+ + ); +} + +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..939b9314b3 --- /dev/null +++ b/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 ( +
+ {mealTypes.map((mealtype, index) => { + return ( + activeMealHandler(mealtype)} + > + {mealtype} + + ); + })} +
+ ); +} + +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..84e87419a8 --- /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 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 diff --git a/src/plays/dynamic-routes/cover.png b/src/plays/dynamic-routes/cover.png new file mode 100644 index 0000000000..f5079ac09a Binary files /dev/null and b/src/plays/dynamic-routes/cover.png differ diff --git a/src/plays/dynamic-routes/dynamicRoutes.css b/src/plays/dynamic-routes/dynamicRoutes.css new file mode 100644 index 0000000000..8a549c2d85 --- /dev/null +++ b/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%; + } +} 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 222b427086..a938ad840c 100644 --- a/src/plays/index.js +++ b/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