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={{
            input: {
              fontWeight: "700",
              border: "none",
              borderRadius: "4px",
            },
            width: { lg: "800px", xs: "350px" },
            backgroundColor: "#fff",
            borderRadius: "40px",
          }}
          height="76px"
          value=""
          onChange={(e) => {}}
          placeholder="Search Exercises"
          type="text"
        />
        <Button
          className="search-btn"
          // variant="contained"
          sx={{
            backgroundColor: "#ff2625",
            color: "#fff",
            textTransform: "none",
            width: { lg: "200px", xs: "80px" },
            fontSize: { lg: "20x", xs: "14px" },
            height: "56px",
            position: "absolute",
            right: "0",
          }}
        >
          Search
        </Button>
      </Box>
    </Stack>
  );
};

export default SearchExercises;

.

.

.

.

.


Comments

Post a Comment

Popular posts from this blog

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