From 48b6b0eaed6a991a1a0629f40dabe4abb8170745 Mon Sep 17 00:00:00 2001 From: Shirisha Date: Sat, 12 Oct 2024 00:20:04 +0530 Subject: [PATCH 1/5] added splide --- frontend/package.json | 1 + frontend/src/components/Pages/Boardgame.jsx | 259 ++++++++++++-------- 2 files changed, 156 insertions(+), 104 deletions(-) diff --git a/frontend/package.json b/frontend/package.json index a1695e2e..81b33c4c 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -13,6 +13,7 @@ }, "dependencies": { "@kinde-oss/kinde-auth-react": "^4.0.4", + "@splidejs/react-splide": "^0.7.12", "@splidejs/splide": "^4.1.4", "@splidejs/splide-extension-auto-scroll": "^0.5.3", "antd": "^5.21.2", diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx index 5edd19ba..cec83d92 100644 --- a/frontend/src/components/Pages/Boardgame.jsx +++ b/frontend/src/components/Pages/Boardgame.jsx @@ -1,4 +1,6 @@ import React, { useState } from 'react'; +import { Splide, SplideSlide } from '@splidejs/react-splide'; +import '@splidejs/react-splide/css'; import board1 from '../../assets/Boardgames/board1.png'; import board2 from '../../assets/Boardgames/board2.png'; import board3 from '../../assets/Boardgames/board3.jpg'; @@ -10,37 +12,39 @@ import board8 from '../../assets/Boardgames/board8.png'; import board10 from '../../assets/Boardgames/board10.png'; import bg from '../../assets/Boardgames/bg.jpg'; - import { LazyLoadImage } from 'react-lazy-load-image-component'; import 'react-lazy-load-image-component/src/effects/blur.css'; export default function Boardgame() { - const [selectedBoard, setSelectedBoard] = useState(null); - const [email, setEmail] = useState(''); + const [selectedBoard, setSelectedBoard] = useState(null); + const [email, setEmail] = useState(''); - const handleSubmit = async (e) => { - e.preventDefault(); - try { - // Make the POST request to /newsletter/subscribe endpoint using fetch - const response = await fetch(`${import.meta.env.VITE_BACKEND_URL}/api/newsletter/subscribe`, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ email }), - }); - - if (!response.ok) { - throw new Error(`HTTP error! status: ${response.status}`); - } - - const data = await response.json(); - alert('Subscription successful! Check your email for confirmation.'); - } catch (error) { - console.error('Error subscribing to newsletter:', error); - alert('Error subscribing. Please try again.'); + const handleSubmit = async (e) => { + e.preventDefault(); + try { + // Make the POST request to /newsletter/subscribe endpoint using fetch + const response = await fetch( + `${import.meta.env.VITE_BACKEND_URL}/api/newsletter/subscribe`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ email }), } - }; + ); + + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + + const data = await response.json(); + alert('Subscription successful! Check your email for confirmation.'); + } catch (error) { + console.error('Error subscribing to newsletter:', error); + alert('Error subscribing. Please try again.'); + } + }; const handleOpenInstructions = (board) => { setSelectedBoard(board); @@ -200,85 +204,132 @@ export default function Boardgame() { }, ]; - return ( - <> -
-
-
-
-
-

- Discover Our Boardgame Collection -

-

- Explore our diverse selection of captivating boardgames, perfect for game nights, family gatherings, and strategic adventures. -

-
-
- -
-
-
-
- {boards.map((board, index) => ( -
-
- {board.title} -
-

{board.title}

-

{board.description}

- -
-
-
- ))} -
-
-
-
-

- Subscribe to our Newsletter -

-

- Stay updated with our latest boardgame collections, special offers, and events. Subscribe now and never miss out! -

-
- setEmail(e.target.value)} // Update email state on input change - required - /> - -
-
-
+ return ( + <> +
+
+
+
+
+

+ Discover Our Boardgame Collection +

+

+ Explore our diverse selection of captivating boardgames, + perfect for game nights, family gatherings, and strategic + adventures. +

+
+
+ + + + + + + + + + + + + + {/* Add more slides as necessary */} + +
+
+
+
+ {boards.map((board, index) => ( +
+
+ {board.title} +
+

{board.title}

+

+ {board.description} +

+ +
+
+
+ ))} +
+
+
+
+

+ Subscribe to our Newsletter +

+

+ Stay updated with our latest boardgame collections, special + offers, and events. Subscribe now and never miss out! +

+
+ setEmail(e.target.value)} // Update email state on input change + required + /> + +
+
+
{/* Modal for instructions */} {selectedBoard && ( From 13d5c6d2d55081efddfb4729971e2392008aa43a Mon Sep 17 00:00:00 2001 From: Shirisha Date: Sat, 12 Oct 2024 00:31:49 +0530 Subject: [PATCH 2/5] added splide with some more images --- frontend/src/components/Pages/Boardgame.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx index cec83d92..e399b347 100644 --- a/frontend/src/components/Pages/Boardgame.jsx +++ b/frontend/src/components/Pages/Boardgame.jsx @@ -249,7 +249,7 @@ export default function Boardgame() { Date: Sat, 12 Oct 2024 08:05:48 +0530 Subject: [PATCH 3/5] Update Boardgame.jsx --- frontend/src/components/Pages/Boardgame.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Pages/Boardgame.jsx b/frontend/src/components/Pages/Boardgame.jsx index 0adcf404..9383f01e 100644 --- a/frontend/src/components/Pages/Boardgame.jsx +++ b/frontend/src/components/Pages/Boardgame.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState,useEffect } from 'react'; import { Splide, SplideSlide } from '@splidejs/react-splide'; import '@splidejs/react-splide/css'; @@ -362,4 +362,4 @@ export default function Boardgame() {
); -} \ No newline at end of file +} From 4139848c572505ab11cd9a391d1a2e6a4f67fe27 Mon Sep 17 00:00:00 2001 From: Shirisha Date: Sat, 12 Oct 2024 11:07:01 +0530 Subject: [PATCH 4/5] added login in signup page --- frontend/src/components/Pages/Signup.jsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/frontend/src/components/Pages/Signup.jsx b/frontend/src/components/Pages/Signup.jsx index 000e5999..00a0087b 100644 --- a/frontend/src/components/Pages/Signup.jsx +++ b/frontend/src/components/Pages/Signup.jsx @@ -1,6 +1,7 @@ import { useState } from "react"; import photo from "../../assets/login.png"; import { useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; const Signup = () => { const API_URL = import.meta.env.VITE_BACKEND_URL || "http://localhost:3000"; @@ -113,6 +114,12 @@ const Signup = () => { {error}
)} +

+ Already have an account? + + Login + +