Games Component Made For Mobile

main
Pedram Keshavarzi 3 years ago
parent b8e26333f2
commit 991fdbabd3
  1. 59
      package-lock.json
  2. 1
      package.json
  3. 102
      src/view/dashboard2/Games.js
  4. 12
      src/view/services/index.css
  5. 26
      src/view/services/index.js
  6. 15696
      yarn.lock

59
package-lock.json generated

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

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

@ -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 }) => {
console.log("Games run ==============================");
console.log(selectedGames);
const Games = ({ gameId, chooseGame, selectedGames, isMobile }) => {
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
key={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={
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-2/5" />
<div
className="Games-title mt-2"
style={gameId === item.id ? { color: "#df1452" } : null}
>
{item.title}
</div>
</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">
{data.map((item, index) => (
<div
key={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={
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-2/5" />
<div
className="Games-title mt-2"
style={gameId === item.id ? { color: "#df1452" } : null}
>
{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);

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

@ -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) => ({

15696
yarn.lock

File diff suppressed because it is too large Load Diff
Loading…
Cancel
Save