Games Component Made For Mobile

package-lock.json

@@ -20,6 +20,7 @@
         "react-dom": "^17.0.2",
         "react-dropzone": "^11.4.2",
         "react-icons": "^4.3.1",
+        "react-indiana-drag-scroll": "^2.1.0",
         "react-redux": "^7.2.6",
         "react-router-dom": "^6.2.1",
         "react-scripts": "5.0.0",
@@ -5229,6 +5230,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-css": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.2.tgz",
@@ -6025,6 +6031,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "node_modules/debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -6408,6 +6419,11 @@
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
       "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
     },
+    "node_modules/easy-bem": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
+    },
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -14159,6 +14175,24 @@
         "react": "*"
       }
     },
+    "node_modules/react-indiana-drag-scroll": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.1.0.tgz",
+      "integrity": "sha512-Tj94Dv9PkmoKqc9nxK/dzwhtE8pP7NTxmeHqkD8KN0zad1NNE+/JsvRcK4EdqE6CdA2nMESzqPMvv1AzRXdBew==",
+      "dependencies": {
+        "classnames": "^2.2.6",
+        "debounce": "^1.2.0",
+        "easy-bem": "^1.1.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
@@ -21027,6 +21061,11 @@
       "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz",
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA=="
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-css": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.2.2.tgz",
@@ -21600,6 +21639,11 @@
         "whatwg-url": "^8.0.0"
       }
     },
+    "debounce": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz",
+      "integrity": "sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug=="
+    },
     "debug": {
       "version": "4.3.3",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.3.tgz",
@@ -21897,6 +21941,11 @@
       "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.3.tgz",
       "integrity": "sha512-iRDI1QeCQIhMCZk48DRDMVgQSSBDmbzzNhnxIo+pwx3swkfjMh6vh0nWLq1NdvGHLKH6wIrAM3vQWeTj6qeoug=="
     },
+    "easy-bem": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/easy-bem/-/easy-bem-1.1.1.tgz",
+      "integrity": "sha512-GJRqdiy2h+EXy6a8E6R+ubmqUM08BK0FWNq41k24fup6045biQ8NXxoXimiwegMQvFFV3t1emADdGNL1TlS61A=="
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -27362,6 +27411,16 @@
       "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==",
       "requires": {}
     },
+    "react-indiana-drag-scroll": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-indiana-drag-scroll/-/react-indiana-drag-scroll-2.1.0.tgz",
+      "integrity": "sha512-Tj94Dv9PkmoKqc9nxK/dzwhtE8pP7NTxmeHqkD8KN0zad1NNE+/JsvRcK4EdqE6CdA2nMESzqPMvv1AzRXdBew==",
+      "requires": {
+        "classnames": "^2.2.6",
+        "debounce": "^1.2.0",
+        "easy-bem": "^1.1.1"
+      }
+    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",

package.json

@@ -15,6 +15,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.4.2",
     "react-icons": "^4.3.1",
+    "react-indiana-drag-scroll": "^2.1.0",
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",

src/view/dashboard2/Games.js

@@ -6,11 +6,11 @@ import img4 from "../../assets/img/Group 1364.svg";
 import img5 from "../../assets/img/Group 1357.svg";
 import img6 from "../../assets/img/Group 1362.svg";
 import { HiCheck } from "react-icons/hi";
+import { connect } from "react-redux";
 
+import ScrollContainer from 'react-indiana-drag-scroll'
 
-const Games = ({ gameId, chooseGame, selectedGames }) => {
+const Games = ({ gameId, chooseGame, selectedGames, isMobile }) => {
-  console.log("Games run ==============================");
-  console.log(selectedGames);
   const [data, setData] = useState([
     {
       id: 1,
@@ -44,36 +44,74 @@ const Games = ({ gameId, chooseGame, selectedGames }) => {
     },
   ]);
   return (
-    <div className="Games w-full h-full pb-3 px-4 flex items-center justify-between border-b border-color1 flex-row-reverse">
+    <>
-      {data.map((item, index) => (
+{
-        <div
+  !isMobile ? <div className="Games w-full h-full pb-3 px-4 flex items-center justify-between border-b border-color1 flex-row-reverse">
-          key={item.id}
+  {data.map((item, index) => (
-          className="Games-item h-full rounded-lg bg-white relative flex items-center justify-center flex-col hover:bg-red82OP hover:text-red52 cursor-pointer hover:border hover:border-red52"
+    <div
-          style={
+      key={item.id}
-            gameId === item.id
+      className="Games-item h-full rounded-lg bg-white relative flex items-center justify-center flex-col hover:bg-red82OP hover:text-red52 cursor-pointer hover:border hover:border-red52"
-              ? {
+      style={
-                  backgroundColor: "rgba(223, 20, 82, 0.02)",
+        gameId === item.id
-                  aspectRatio: "0.95/1",
+          ? {
-                  border: "1px solid #df1452",
+              backgroundColor: "rgba(223, 20, 82, 0.02)",
-                }
+              aspectRatio: "0.95/1",
-              : { aspectRatio: "0.95/1" }
+              border: "1px solid #df1452",
-          }
+            }
-          onClick={() => chooseGame(item.id)}
+          : { aspectRatio: "0.95/1" }
-        >
+      }
-          {selectedGames.includes(item.id) &&<div className="Games-item-active-circle w-4 h-4 rounded-full bg-color2 flex items-center justify-center absolute top-2 left-2">
+      onClick={() => chooseGame(item.id)}
-            <HiCheck className="text-white h-3/4" />
+    >
-          </div>}
+      {selectedGames.includes(item.id) &&<div className="Games-item-active-circle w-4 h-4 rounded-full bg-color2 flex items-center justify-center absolute top-2 left-2">
-          <img src={item.img} alt="game-img" className="h-2/5" />
+        <HiCheck className="text-white h-3/4" />
-          <div
+      </div>}
-            className="Games-title mt-2"
+      <img src={item.img} alt="game-img" className="h-2/5" />
-            style={gameId === item.id ? { color: "#df1452" } : null}
+      <div
-          >
+        className="Games-title mt-2"
-            {item.title}
+        style={gameId === item.id ? { color: "#df1452" } : null}
-          </div>
+      >
-        </div>
+        {item.title}
-      ))}
+      </div>
     </div>
+  ))}
+</div> : 
+  <ScrollContainer className="carousel-overview">
+    {data.map((item, index) => (
+    <div
+      key={item.id}
+      className="Games-item h-full w-full p-2 rounded-lg bg-white relative flex items-center mx-2 justify-center flex-col hover:bg-red82OP hover:text-red52 cursor-pointer border border-red82OP hover:border-red52"
+      style={
+        gameId === item.id
+          ? {
+              backgroundColor: "rgba(223, 20, 82, 0.02)",
+              aspectRatio: "0.95/1",
+              border: "1px solid #df1452",
+            }
+          : { aspectRatio: "0.95/1" }
+      }
+      onClick={() => chooseGame(item.id)}
+    >
+      {selectedGames.includes(item.id) &&<div className="Games-item-active-circle w-4 h-4 rounded-full bg-color2 flex items-center justify-center absolute top-2 left-2">
+        <HiCheck className="text-white h-3/4" />
+      </div>}
+      <img src={item.img} alt="game-img" className="h-1/2" />
+      <div
+        className=" text-xs font-bold text-black40 mt-2"
+        style={gameId === item.id ? { color: "#df1452" } : null}
+      >
+        {item.title}
+      </div>
+    </div>
+  ))}
+  </ScrollContainer>
+}
+    
+    </>
   );
 };
+const mapStateToProps = (state) => ({
+  isMobile: state.publicApi.isMobile,
+});
+const mapDispatchToProps = ({});
 
-export default Games;
+export default connect(mapStateToProps, mapDispatchToProps)(Games);

src/view/services/index.css

@@ -0,0 +1,12 @@
+.carousel-overview{
+    width:100%;
+     display: flex;
+    
+
+   
+   overflow:scroll;
+    overflow-y: hidden;
+    direction: rtl;
+    height:125px;
+    padding: 15px;
+}

src/view/services/index.js

@@ -3,6 +3,8 @@ import { book, publicApi, userProduct } from "../../redux/actions";
 import { connect } from "react-redux";
 import { Link } from "react-router-dom";
 import Product from "../../components/Product";
+import ScrollContainer from 'react-indiana-drag-scroll'
+
 
 import img1 from "../../assets/img/Group 1344.svg";
 import img2 from "../../assets/img/Group 1345.svg";
@@ -15,6 +17,10 @@ import ServicePopUp from "./service";
 import Games from "../dashboard2/Games";
 import Packages from "../dashboard2/Packages";
 
+
+
+import './index.css'
+
 const Services = ({
   isMobile,
   books,
@@ -106,7 +112,7 @@ const Services = ({
   const chooseGame = (id) => {
     setGameId(id);
   };
-
+if (!isMobile){
   return (
     <div
       className="flex items-start  justify-between"
@@ -419,7 +425,23 @@ const Services = ({
         <ShoppingCart />
       </div> }
     </div>
-  );
+  );}
+  // Mobile Version
+  else{
+    return(
+    <div className="flex flex-col items-center mt-20">
+
+      <Games
+            selectedGames={selectedGames}
+            gameId={gameId}
+            chooseGame={chooseGame}
+          />
+          <div className="w-11/12 border-b border-gray-200"></div>
+          
+    </div>
+    )
+  }
+
 };
 
 const mapStateToProps = (state) => ({