adrianhajdin · June 11, 2022 11:18 · Kanij-kannu · Aug 15, 2023 · Kanij-kannu · Aug 17, 2023
diff --git a/App.css b/App.css
 body {
  font-family: 'Josefin Sans';
  background-color: #FFFAFB;
 }

 * {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;

 }

 ::-webkit-scrollbar {
  width: 0px;
 }

 .right-arrow,
 .left-arrow {
  cursor: pointer;
  background: transparent;
  outline: none;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #FF2625;
  font-size: 25px;
  border-radius: 4px;
  position: absolute;
  bottom: -20px;
  right: 80px;
  transform: scale(1, 1);
  transition: 0.3s all ease-in-out;
 }

 .right-arrow {
  right: 140px;
 }

 .right-arrow:hover,
 .left-arrow:hover {
  transform: scale(1.3, 1.3);
 }

 .react-horizontal-scrolling-menu--wrapper {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
 }

 .detail-image {
  width: 729px;
  height: 742px;
 }

 .hero-banner-img {
  position: absolute;
  right: 40px;
  top: 0px;
  width: 700px;
  height: 900px;
  margin-top: -330px;

 }

 .exercise-card {
  width: 400px;
  height: 445px;
  background: #fff;
  border-top: 4px solid #FF2625;
  border-bottom-left-radius: 20px;
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  padding-bottom: 10px;
  transform: scale(1, 1);
  transition: 0.3s all ease-in-out;
 }

 .exercise-card img {
  height: 326px;
 }

 .bodyPart-card {
  transform: scale(1, 1);
  transition: 0.3s all ease-in-out;
 }

 .exercise-card:hover,
 .bodyPart-card:hover {
  transform: scale(1.1, 1.1);
 }

 .search-btn:hover {
  color: #FF2625 !important;
  border: 1px solid #FF2625 !important;
 }

 .exercise-video {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 387px;
  height: 381px;
  text-decoration: none;
 }

 @media screen and (max-width:1200px) {
  .detail-image {
    width: 300px;
    height: 300px;
  }


  .react-horizontal-scrolling-menu--scroll-container {
    width: 500px;
  }

  .left-arrow,
  .right-arrow {
    position: static !important;
  }

  .hero-banner-img {
    display: none;
  }

  .exercise-card {
    width: 320px;
  }

  .exercise-video {
    width: 320px;
    height: 300px;
  }

 }

 @media screen and (max-width:400px) {
  .exercise-card {
    width: 280px;
  }
 }
diff --git a/HorizontalScrollbar.js b/HorizontalScrollbar.js
 import React, { useContext } from 'react';
 import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
 import { Box, Typography } from '@mui/material';

 import ExerciseCard from './ExerciseCard';
 import BodyPart from './BodyPart';
 import RightArrowIcon from '../assets/icons/right-arrow.png';
 import LeftArrowIcon from '../assets/icons/left-arrow.png';

 const LeftArrow = () => {
  const { scrollPrev } = useContext(VisibilityContext);

  return (
    <Typography onClick={() => scrollPrev()} className="right-arrow">
      <img src={LeftArrowIcon} alt="right-arrow" />
    </Typography>
  );
 };

 const RightArrow = () => {
  const { scrollNext } = useContext(VisibilityContext);

  return (
    <Typography onClick={() => scrollNext()} className="left-arrow">
      <img src={RightArrowIcon} alt="right-arrow" />
    </Typography>
  );
 };

 const HorizontalScrollbar = ({ data, bodyParts, setBodyPart, bodyPart }) => (
  <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
    {data.map((item) => (
      <Box
        key={item.id || item}
        itemId={item.id || item}
        title={item.id || item}
        m="0 40px"
      >
        {bodyParts ? <BodyPart item={item} setBodyPart={setBodyPart} bodyPart={bodyPart} /> : <ExerciseCard exercise={item} /> }
      </Box>
    ))}
  </ScrollMenu>
 );

 export default HorizontalScrollbar;
diff --git a/package.json b/package.json
 "dependencies": {
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mui/icons-material": "^5.6.1",
    "@mui/material": "^5.6.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-horizontal-scrolling-menu": "^2.7.1",
    "react-loader-spinner": "^6.0.0-0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1"
  },
	body {
	font-family: 'Josefin Sans';
	background-color: #FFFAFB;
	}

	* {
	padding: 0px;
	margin: 0px;
	box-sizing: border-box;

	}

	::-webkit-scrollbar {
	width: 0px;
	}

	.right-arrow,
	.left-arrow {
	cursor: pointer;
	background: transparent;
	outline: none;
	border: none;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #FF2625;
	font-size: 25px;
	border-radius: 4px;
	position: absolute;
	bottom: -20px;
	right: 80px;
	transform: scale(1, 1);
	transition: 0.3s all ease-in-out;
	}

	.right-arrow {
	right: 140px;
	}

	.right-arrow:hover,
	.left-arrow:hover {
	transform: scale(1.3, 1.3);
	}

	.react-horizontal-scrolling-menu--wrapper {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	}

	.detail-image {
	width: 729px;
	height: 742px;
	}

	.hero-banner-img {
	position: absolute;
	right: 40px;
	top: 0px;
	width: 700px;
	height: 900px;
	margin-top: -330px;

	}

	.exercise-card {
	width: 400px;
	height: 445px;
	background: #fff;
	border-top: 4px solid #FF2625;
	border-bottom-left-radius: 20px;
	text-decoration: none;
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	padding-bottom: 10px;
	transform: scale(1, 1);
	transition: 0.3s all ease-in-out;
	}

	.exercise-card img {
	height: 326px;
	}

	.bodyPart-card {
	transform: scale(1, 1);
	transition: 0.3s all ease-in-out;
	}

	.exercise-card:hover,
	.bodyPart-card:hover {
	transform: scale(1.1, 1.1);
	}

	.search-btn:hover {
	color: #FF2625 !important;
	border: 1px solid #FF2625 !important;
	}

	.exercise-video {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 387px;
	height: 381px;
	text-decoration: none;
	}

	@media screen and (max-width:1200px) {
	.detail-image {
	width: 300px;
	height: 300px;
	}


	.react-horizontal-scrolling-menu--scroll-container {
	width: 500px;
	}

	.left-arrow,
	.right-arrow {
	position: static !important;
	}

	.hero-banner-img {
	display: none;
	}

	.exercise-card {
	width: 320px;
	}

	.exercise-video {
	width: 320px;
	height: 300px;
	}

	}

	@media screen and (max-width:400px) {
	.exercise-card {
	width: 280px;
	}
	}
	import React, { useContext } from 'react';
	import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
	import { Box, Typography } from '@mui/material';

	import ExerciseCard from './ExerciseCard';
	import BodyPart from './BodyPart';
	import RightArrowIcon from '../assets/icons/right-arrow.png';
	import LeftArrowIcon from '../assets/icons/left-arrow.png';

	const LeftArrow = () => {
	const { scrollPrev } = useContext(VisibilityContext);

	return (
	<Typography onClick={() => scrollPrev()} className="right-arrow">
	<img src={LeftArrowIcon} alt="right-arrow" />
	</Typography>
	);
	};

	const RightArrow = () => {
	const { scrollNext } = useContext(VisibilityContext);

	return (
	<Typography onClick={() => scrollNext()} className="left-arrow">
	<img src={RightArrowIcon} alt="right-arrow" />
	</Typography>
	);
	};

	const HorizontalScrollbar = ({ data, bodyParts, setBodyPart, bodyPart }) => (
	<ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
	{data.map((item) => (
	<Box
	key={item.id \|\| item}
	itemId={item.id \|\| item}
	title={item.id \|\| item}
	m="0 40px"
	>
	{bodyParts ? <BodyPart item={item} setBodyPart={setBodyPart} bodyPart={bodyPart} /> : <ExerciseCard exercise={item} /> }
	</Box>
	))}
	</ScrollMenu>
	);

	export default HorizontalScrollbar;
	"dependencies": {
	"@emotion/react": "^11.9.0",
	"@emotion/styled": "^11.8.1",
	"@mui/icons-material": "^5.6.1",
	"@mui/material": "^5.6.1",
	"react": "^18.0.0",
	"react-dom": "^18.0.0",
	"react-horizontal-scrolling-menu": "^2.7.1",
	"react-loader-spinner": "^6.0.0-0",
	"react-router-dom": "^6.3.0",
	"react-scripts": "5.0.1"
	},