From a346de3ad8ff299847debfe5277b571a09ab52b8 Mon Sep 17 00:00:00 2001
From: Antoine M <antoine.martinon@deligraph.com>
Date: Mon, 18 Mar 2024 11:12:10 +0100
Subject: [PATCH] introducing thematiques component

---
 src/pages/Thematiques.jsx | 71 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 src/pages/Thematiques.jsx

diff --git a/src/pages/Thematiques.jsx b/src/pages/Thematiques.jsx
new file mode 100644
index 0000000..c444a99
--- /dev/null
+++ b/src/pages/Thematiques.jsx
@@ -0,0 +1,71 @@
+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";
+
+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='page_title'>
+					<h1>Thémathiques</h1>
+				</div>
+
+				<div className='swiper-container'>
+					<Swiper
+						effect={"cards"}
+						// slidesPerView={2}
+						navigation={true}
+						centeredSlides={true}
+						// spaceBetween={30}
+						keyboard={{
+							enabled: true,
+						}}
+						pagination={{
+							clickable: true,
+						}}
+						grabCursor={true}
+						breakpoints={{
+							640: {
+								slidesPerView: 2,
+								spaceBetween: 20,
+							},
+							768: {
+								slidesPerView: 4,
+								spaceBetween: 40,
+							},
+							1024: {
+								slidesPerView: 3,
+								spaceBetween: 50,
+							},
+						}}
+						modules={[Pagination, Navigation, EffectCards]}
+						className='mySwiper'>
+						<SwiperSlide>Slide 1</SwiperSlide>
+						<SwiperSlide>Slide 2</SwiperSlide>
+						<SwiperSlide>Slide 2</SwiperSlide>
+						<SwiperSlide>Slide 3</SwiperSlide>
+						<SwiperSlide>Slide 4</SwiperSlide>
+					</Swiper>
+				</div>
+				<Footer />
+			</div>
+		</AnimatedPage>
+	);
+}