You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

117 lines
3.5 KiB

import { useState } from "react";
import img1 from "../../assets/img/Group 1344.svg";
import img2 from "../../assets/img/Group 1345.svg";
import img3 from "../../assets/img/Group 1349.svg";
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, isMobile }) => {
const [data, setData] = useState([
{
id: 1,
img: img1,
title: 'کلاس های آموزشی',
},
{
id: 2,
img: img2,
title: 'پیش ثبت نام مدارس',
},
{
id: 3,
img: img3,
title: 'بسته های آزمون',
},
{
id: 4,
img: img4,
title: 'کتاب های آموزشی',
},
{
id: 5,
img: img5,
title: 'دوره های مجازی',
},
{
id: 6,
img: img6,
title: 'سایر خدمات',
},
]);
return (
<>
{
!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 connect(mapStateToProps, mapDispatchToProps)(Games);