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",

            textTransform: "capatalize",

          }}

        >

          {exercise.bodyPart}

        </Button>

        <Button

          sx={{

            ml: "21px",

            color: "#fff",

            backgroundColor: "#fcc757",

            fontSize: "14px",

            borderRadius: "20px",

            textTransform: "capatalize",

          }}

        >

          {exercise.target}

        </Button>

      </Stack>

      <Typography

        ml="21px"

        color="#000"

        fontWeight="bold"

        mt="11px"

        pb="10px"

        textTransform="capitalize"

        fontSize="22px"

      >

        {exercise.name}

      </Typography>

    </Link>

  );

};

export default ExerciseCard;