Add Initial Swipe

frontend/package.json

@@ -13,9 +13,11 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0",
+    "react-swipeable": "^7.0.1",
     "swiper": "^11.1.4"
   },
   "devDependencies": {
+    "@types/fullpage.js": "^2.9.6",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@typescript-eslint/eslint-plugin": "^7.13.1",

frontend/src/App.css

@@ -0,0 +1,35 @@
+/* index.css */
+
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.swipeable-cards-container {
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.swipeable-card {
+    width: 300px;
+    height: 400px;
+    margin: 10px;
+    background-color: #f2f2f2;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5em;
+    border-radius: 10px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease;
+}
+
+.swipeable-card:active {
+    transform: scale(0.95);
+}

frontend/src/components/SwipeableCard.tsx

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+import { useSwipeable } from 'react-swipeable';
+
+interface SwipeableCardProps {
+    content: string;
+    onSwiped: (dir: string) => void;
+}
+
+function SwipeableCard({ content, onSwiped }: SwipeableCardProps) {
+    const [flipped, setFlipped] = useState(false);
+
+    const handlers = useSwipeable({
+        onSwipedLeft: () => {
+            setFlipped(true);
+            setTimeout(() => {
+                onSwiped('left');
+                setFlipped(false);
+            }, 600);
+        },
+        onSwipedRight: () => {
+            setFlipped(true);
+            setTimeout(() => {
+                onSwiped('right');
+                setFlipped(false);
+            }, 600);
+        },
+        onSwipedUp: () => {
+            setFlipped(true);
+            setTimeout(() => {
+                onSwiped('up');
+                setFlipped(false);
+            }, 600);
+        },
+        onSwipedDown: () => {
+            setFlipped(true);
+            setTimeout(() => {
+                onSwiped('down');
+                setFlipped(false);
+            }, 600);
+        },
+    });
+
+    return (
+        <div className={`swipeable-card ${flipped ? 'flipped' : ''}`} {...handlers}>
+            <div className="card-inner">
+                <div className="card-front">
+                    {content}
+                </div>
+                <div className="card-back">
+                    Swiped!
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export default SwipeableCard;

frontend/src/pages/Home.tsx

@@ -1,44 +1,42 @@
-import React from 'react';
+import React, {useState} from 'react';
+
+import ReactFullpage from '@fullpage/react-fullpage';
 
-import {A11y, Navigation, Scrollbar} from 'swiper/modules';
-import {Swiper, SwiperSlide} from 'swiper/react';
 // Import Swiper styles
 import "swiper/css";
 import "swiper/css/effect-coverflow";
 import 'swiper/css/navigation';
 import 'swiper/css/pagination';
+import SwipeableCard from "../components/SwipeableCard.tsx";
 
 // Initialize Swiper modules
 // SwiperCore.use([Navigation, Pagination]);
 
 function Home() {
-    const texts = [
-        "This is text 1",
-        "This is text 2",
-        "This is text 3",
-        "This is text 4",
-        "This is text 5",
-    ];
+
+    const [cards, setCards] = useState([
+        { id: 1, content: 'Card 1' },
+        { id: 2, content: 'Card 2' },
+        { id: 3, content: 'Card 3' },
+    ]);
+
+    const [currentCardIndex, setCurrentCardIndex] = useState(0);
+
+    const handleSwiped = (dir: string) => {
+        console.log(`Card ${cards[currentCardIndex].id} swiped ${dir}`);
+        // Move to the next card
+        setCurrentCardIndex((prev) => (prev + 1) % cards.length);
+    };
 
     return (
-        <div className="flex justify-center items-center h-screen bg-gray-100">
-            <Swiper
-                // install Swiper modules
-                modules={[Navigation, Scrollbar, A11y]}
-                spaceBetween={50}
-                slidesPerView={1}
-                scrollbar={{draggable: true}}
-                onSwiper={(swiper) => console.log(swiper)}
-            >
-                {texts.map((text, index) => (
-                    <SwiperSlide key={index}>
-                        <div
-                            className="flex justify-center items-center w-72 h-96 bg-white shadow-lg rounded-lg text-2xl text-center">
-                            {text}
-                        </div>
-                    </SwiperSlide>
-                ))}
-            </Swiper>
+        <div className="swipeable-cards-container">
+            {cards.length > 0 && (
+                <SwipeableCard
+                    key={cards[currentCardIndex].id}
+                    content={cards[currentCardIndex].content}
+                    onSwiped={handleSwiped}
+                />
+            )}
         </div>
     );
 }