78 lines
2.2 KiB
JavaScript
78 lines
2.2 KiB
JavaScript
import React from "react";
|
|
|
|
import Nav from "../components/ui/Nav";
|
|
import AnimatedPage from "../components/AnimatedPage";
|
|
import Footer from "../components/ui/Footer";
|
|
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import "swiper/css";
|
|
import "swiper/css/pagination";
|
|
import "swiper/css/navigation";
|
|
import "swiper/css/effect-cards";
|
|
|
|
import { Keyboard, Pagination, Navigation, EffectCards } from "swiper/modules";
|
|
|
|
import GameSlide from "../components/Thematiques/GameSlide";
|
|
import { useWordpressCustomData } from "../services/WordpressFetchData";
|
|
import { Link } from "react-router-dom";
|
|
|
|
export default function Thematiques() {
|
|
const gamesDatas = useWordpressCustomData(`/screen/play/all`);
|
|
console.log(gamesDatas);
|
|
|
|
return (
|
|
<AnimatedPage className='page-container page-container--thematiques '>
|
|
<div className='content-page '>
|
|
<Nav />
|
|
<div className='inner-content'>
|
|
<div className='page-title'>
|
|
<h1 className='page-title__title'>Thémathiques</h1>
|
|
<div className='page-title__span-construction'>Interactive</div>
|
|
</div>
|
|
|
|
<div className='swiper-container'>
|
|
<Swiper
|
|
effect={"cards"}
|
|
// slidesPerView={2}
|
|
navigation={true}
|
|
centeredSlides={true}
|
|
// spaceBetween={30}
|
|
keyboard={{
|
|
enabled: true,
|
|
}}
|
|
pagination={{
|
|
clickable: true,
|
|
}}
|
|
grabCursor={true}
|
|
modules={[Pagination, Navigation, EffectCards]}
|
|
className='mySwiper'>
|
|
{gamesDatas &&
|
|
gamesDatas.map((game, index) => (
|
|
<SwiperSlide key={index} className='game-slide'>
|
|
<div className='game-slide__cover'>
|
|
<img
|
|
src={game.gameCover}
|
|
alt=''
|
|
/>
|
|
</div>
|
|
<h2 className='game-slide__title'>
|
|
<Link
|
|
to={`/play/${game.gameId}`}>
|
|
{game.gameTitle}
|
|
</Link>
|
|
</h2>
|
|
|
|
<Link
|
|
to={`/play/${game.gameId}`}
|
|
className='cta cta--construction cta--round cta--button-icon cta--play'></Link>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div>
|
|
<Footer />
|
|
</div>
|
|
</AnimatedPage>
|
|
);
|
|
}
|