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
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); |