Horizontal scroll bar added

package.json

@@ -3,6 +3,9 @@
     "version": "0.1.0",
     "private": true,
     "dependencies": {
+        "@emotion/react": "^11.9.3",
+        "@emotion/styled": "^11.9.3",
+        "@mui/material": "^5.8.5",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.3.0",
         "@testing-library/user-event": "^13.5.0",

src/App.css

@@ -46,4 +46,5 @@ h6 {
     font-weight: 900;
     color: #0e1133;
     margin: 0px;
+    text-transform: capitalize;
 }

src/components/HorizontalScrollbar.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { ScrollMenu } from 'react-horizontal-scrolling-menu'
+import ExerciseCard from './exercises/ExerciseCard'
+import Cards from './services/Cards'
+
+const HorizontalScrollbar = ({data, bodyPart, setBodyPart}) => {
+  return (
+    <ScrollMenu>
+        {data.map((item) => (
+            <Cards key={item.id} item={item} bodyPart={bodyPart} setBodyPart={setBodyPart}/>
+        ))}
+
+    </ScrollMenu>
+  )
+}
+
+export default HorizontalScrollbar

src/components/exercises/Exercise.jsx

@@ -1,9 +1,28 @@
-import React, { useEffect } from 'react'
+import { Pagination } from '@mui/material'
+import React, { useEffect, useState } from 'react'
 import { exerciseOptions, fetchData } from '../../utils/fetChData'
 import './exercise.css'
 import ExerciseCard from './ExerciseCard'
 
 const Exercise = ({exercise, setExercise, bodyPart}) => {
+
+
+  //pagination
+
+  const[currentPage,setCurrentPage] = useState(1);
+  const exercisesPerPage = 9;
+
+
+
+  const indexOfLastExercise = currentPage * exercisesPerPage;
+  const indexOfFirstExercise = indexOfLastExercise - exercisesPerPage;
+  const currentExercises = exercise.slice(indexOfFirstExercise,indexOfLastExercise)
+  console.log(currentExercises);
+
+  const paginate = (e, value) => {
+    setCurrentPage(value);
+    window.scrollTo({top:2000, behavior:'smooth'})
+  }
 
     useEffect(() =>{
         const fetchExercisesData = async () => {
@@ -21,22 +40,45 @@ const Exercise = ({exercise, setExercise, bodyPart}) => {
 
     },[bodyPart])
 
+
+
   return (
-    <div className="container">
+    <div className="exercises">
+      <div className="container">
           <div className="exericse-title">
-            <h3>Perfect Exercises <br/>for various body Parts</h3>
+            <h3>Perfect Exercises For Your <span>{bodyPart === 'all'? 'Body': bodyPart}</span></h3>
             <p>The full monty spiffing good time no biggie cack grub fantastic. </p>
           </div>
           <div className="exercises-card">
 
-
-            <ExerciseCard exercise={exercise}/>
+              {currentExercises.map((ex, index) =>(
+                <ExerciseCard key={index} exercise={ex}/>
+              ))}
+
 
 
 
           </div>
+          {
+            exercise.length > exercisesPerPage && (
+              <Pagination
+                color='standard'
+                shape='rounded'
+                defaultPage={1}
+                count={Math.ceil(exercise.length/exercisesPerPage)}
+                page={currentPage}
+                onChange={paginate}
+                size="large"
+              >
+
+              </Pagination>
+            )
+          }
 
         </div>
+
+    </div>
+
   )
 }
 

src/components/exercises/ExerciseCard.jsx

@@ -5,36 +5,18 @@ const ExerciseCard = ({exercise}) => {
 
 
   return (
-    //  exercise.map((item) => (
-    //     <div key={item.id || item} className="card" 
-    //     onClick={()=>{
-    //     //   setBodyPart(bodyPart);
-    //     //   window.scrollTo({top: 2000, left:100, behavior:"smooth"})
-    //     }}>
-    //       <div className="card-container">
-    //           <div className="card-icon">
-    //               <img src={item.gifUrl} alt="card icon" />
-    //               <span>1</span>
-    //           </div>
-    //           <h4 className='card-title'>{item.name}</h4>
-    //           <p className='card-desc'>Mucker plastered bugger all mate morish are.</p>
-    //       </div>
-    //   </div>
-
-    // ))
-
-    exercise.map((item) => (
-        <div key={item.id || item.name} className="exercise-card">
+
+        <div className="exercise-card" onClick={() => (console.log(exercise.id))}>
             <div className="exercise-thumnail">
-                <img src={item.gifUrl} alt={item.name} />
+                <img src={exercise.gifUrl} alt={exercise.name} />
             </div>
             <div className="exercise-content">
-                <span>{item.target}</span>
-                <h3>{item.name}</h3>
+                <span>{exercise.target}</span>
+                <h3>{exercise.name}</h3>
             </div>
 
         </div>
-    ))
+
   )
 }
 

src/components/exercises/exercise.css

@@ -1,7 +1,13 @@
+.exercises {
+    padding-bottom: 100px;
+    padding-top: 90px;
+}
+
 .exercises-card {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 30px;
+    cursor: pointer;
 }
 
 .exericse-title {
@@ -26,11 +32,8 @@
     margin-top: 30px;
     border: 1px solid #f8452d;
     text-align: center;
-    box-shadow: 10px 10px 5px 0px rgba(227, 23, 23, 0.75);
-    -webkit-box-shadow: 10px 10px 5px 0px rgba(227, 23, 23, 0.75);
-    -moz-box-shadow: 10px 10px 5px 0px rgba(227, 23, 23, 0.75);
-    padding: 30px;
     border-radius: 20px;
+    margin-bottom: 30px;
 }
 
 .exercise-thumnail {

src/components/header/Hero.jsx

@@ -15,7 +15,9 @@ const Hero = () => {
             <p>Hanky panky lavatory up the duff jolly good cack brolly is chinwag <br/>zonked happy days sloshed.</p>
           </div>
           <div className="hero-btns">
-            <button className="animated-btn hero-ios-btn">Download for iOs</button>
+            <button onClick={()=>{
+                        window.scrollTo({top: 1200, left:100, behavior:"smooth"})
+                        }} className="animated-btn hero-ios-btn">Download for iOs</button>
             <button className="animated-btn hero-android-btn">Download for Android</button>
           </div>
         </div>

src/components/services/Cards.jsx

@@ -2,27 +2,25 @@ import React from 'react'
 import './cards.css'
 import CardIcon from '../../assets/icons/1.png'
 
-const Cards = ({data,bodyPart,setBodyPart}) => {
-  console.log(bodyPart);
+const Cards = ({item,bodyPart,setBodyPart}) => {
   return (
 
-    data.map((bodyPart) => (
-        <div key={bodyPart.id || bodyPart} className="card" 
+
+        <div className="card" 
         onClick={()=>{
-          setBodyPart(bodyPart);
-          window.scrollTo({top: 2000, left:100, behavior:"smooth"})
+          setBodyPart(item);
+          window.scrollTo({top: 1200, left:100, behavior:"smooth"})
         }}>
           <div className="card-container">
               <div className="card-icon">
                   <img src={CardIcon} alt="card icon" />
                   <span>1</span>
               </div>
-              <h4 className='card-title'>{bodyPart}</h4>
-              <p className='card-desc'>Mucker plastered bugger all mate morish are.</p>
+              <h4 className='card-title'>{item}</h4>
           </div>
       </div>
 
-    ))
+
 
   )
 }

src/components/services/Services.jsx

@@ -2,11 +2,10 @@ import React, { useEffect, useState } from 'react'
 import { exerciseOptions, fetchData } from '../../utils/fetChData';
 import Cards from './Cards'
 import './service.css'
-
-import Carousel from 'react-multi-carousel';
 import 'react-multi-carousel/lib/styles.css';
+import HorizontalScrollbar from '../HorizontalScrollbar';
 
-const Services = ({bodyPart, setBodyPart}) => {
+const Services = ({exercise, bodyPart, setBodyPart}) => {
 
   const [bodyParts, setBodyParts] = useState([]);
 
@@ -35,7 +34,7 @@ const Services = ({bodyPart, setBodyPart}) => {
           </div>
           <div className="services-card">
 
-              <Cards data = {bodyParts} bodyPart={bodyPart} setBodyPart={setBodyPart}/>
+              <HorizontalScrollbar data = {bodyParts} bodyPart={bodyPart} setBodyPart={setBodyPart}/>
 
 
 

src/components/services/cards.css

@@ -10,6 +10,8 @@
     margin-top: 30px;
     text-align: center;
     cursor: pointer;
+    margin: 0 30px;
+    width: 240px;
 }
 
 .card-icon {

src/components/services/service.css

@@ -25,8 +25,4 @@
     margin-top: 11px;
 }
 
-.services-card {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    gap: 20px;
-}
+.services-card {}