8.bodypart card / category

.import React from "react";

import { Stack, Typography } from "@mui/material";

import Icon from "../../assets/icons/gym.png";

const BodyPart = ({ item, bodyPart, setBodyPart }) => {
  return (
    <Stack
      type="button"
      alignItems="center"
      justifyContent="center"
      spacing={4.7}
      className="bodyPart-card"
      sx={{
        borderTop: bodyPart === item ? "4px solid #ff2625" : "",
        backgroundColor: "#fff",
        borderBottomLeftRadius: "20px",
        width: "270px",
        height: "280px",
        cursor: "pointer",
        boxShadow: "0 0 25px rgba(0,0,0,0.2)",
      }}
      onClick={() => {
        setBodyPart(item);
        window.scrollTo({ top: 1800, left: 100, behavior: "smooth" });
      }}
    >
      <img
        src={Icon}
        alt="dumbBell"
        style={{ width: "40px", height: "40px" }}
      />
      <Typography
        fontSize="24px"
        fontWeight="bold"
        color="#3a1212"
        textTransform="capitalize"
      >
        {item}
      </Typography>
    </Stack>
  );
};

export default BodyPart;

.our bodyparts=[all,...fetched_bodyparts]

so data passed as prop ie, data= bodyparts

item= mapped ie each item of data

and state bodypart is set to 'all' initially so ,

at ist map item = bodypart = 'all'

so, .borderTop: bodyPart === item ? "4px solid #ff2625" : "",.will make red border at top of first item/bodypart/category card

..   onClick={() => {

        setBodyPart(item);
        window.scrollTo({ top: 1800, left: 100, behavior: "smooth" });
      }}

This part will set bodypart = item clicked eg if waist card is clicked then

bodypart = waist so now waist card will hap border top of red color.

window.scrollTo({ top: 1800, left: 100, behavior: "smooth" } this line will scroll down

the page when clicked on card.

.

.

.

.

 

Comments

Post a Comment

Popular posts from this blog

5. Create SearchExercise Section

 ....Here is how you make UI.Later we will fetch data for this section. import React , { useState , useEffect } from "react" ; import { Box , Typography , Stack , TextField , Button } from "@mui/material" ; const SearchExercises = () => {   return (     < Stack justifyContent = "center" alignItems = "center" mt = "37px" p = "20px" >       < Typography         fontWeight = { 700 }         sx = { { fontSize : { lg : "44px" , xs : "30px" } } }         mb = "50px"         textAlign = "center"       >         Awesome Exercises You < br />         Should Know       </ Typography >       < Box position = "relative" mb = "72px" >         < TextField           sx = { {         ...
Read more

9.exerxise card

  import React from "react" ; import { Link } from "react-router-dom" ; import { Stack , Typography , Button } from "@mui/material" ; const ExerciseCard = ({ exercise }) => {   // console.log(exercise); // only appear when you serach something eg:back   return (     < Link className = "exercise-card" to = { `/exercise/ ${ exercise . id } ` } >       < img src = { exercise . gifUrl } alt = { exercise . name } loading = "lazy" />       < Stack flexDirection = "row" >         < Button           sx = { {             ml : "21px" ,             color : "#fff" ,             backgroundColor : "#ffa9a9" ,             fontSize : "14px" ,             borderRadius : "20px" ,         ...
Read more

7. Horizontal Scroll bar

 First lets do prop drilling (of course u can use context api but for now lets use props only): in home.jsx . import React , { useState } from "react" ; import { Box } from "@mui/material" ; import HeroBanner from "../../components/HeroBanner/HeroBanner" ; import SearchExercises from "../../components/SearchExercises/SearchExercises" ; import Exercises from "../../components/Exercises/Exercises" ; const Home = () => {   const [ bodyPart , setBodyPart ] = useState ( "all" );   const [ exercises , setExercises ] = useState ([]);   return (     < Box >       < HeroBanner />       < SearchExercises         bodyPart = { bodyPart }         setExercises = { setExercises }         setBodyPart = { setBodyPart }       />       < Exercises         bodyPart = { bodyPart }     ...
Read more