feat: card swiper with multiple cards

frontend/src/app/components/TinderSwiper/TinderSwiper.js

@@ -1,23 +1,20 @@
 "use client";
 
-import React, { useState } from "react";
 import styles from "./TinderSwiper.module.css";
 import TinderCard from "react-tinder-card";
 
-const TinderSwiper = ({ taksId, taskName }) => {
+const TinderSwiper = ({ tasks }) => {
+  console.log(tasks);
   return (
     <>
       <div className={styles.cardStack}>
-        <TinderCard key="1" className={styles.card}>
-          <div className={styles.container}>
-            <span className="h1">{taskName}</span>
-          </div>
-        </TinderCard>
-        <TinderCard key="2" className={styles.card}>
-          <div className={styles.container}>
-            <span className="h1">{taskName}</span>
-          </div>
-        </TinderCard>
+        {tasks.map(({ id, name }) => (
+          <TinderCard key={id} className={styles.card}>
+            <div className={styles.container}>
+              <span className="h1">{name}</span>
+            </div>
+          </TinderCard>
+        ))}
       </div>
       <div className={styles.decissionTriggers}>
         <button className="h2 circle bgRed colorWhite">Later</button>

frontend/src/app/testdata/tasks.js

@@ -1,52 +1,52 @@
 const tasks = [
   {
-    "id": 123,
-    "name": "Bad putzen",
-    "urgency": 3,
-    "importance": 2,
-    "fun_factor": 1,
-    "duration": 30,
-    "deadline": 1345354361,
-    "depends_on": [],
-    "creation_date": 173864511234,
-    "status": "open"
+    id: 123,
+    name: "Bad putzen",
+    urgency: 3,
+    importance: 2,
+    fun_factor: 1,
+    duration: 30,
+    deadline: 1345354361,
+    depends_on: [],
+    creation_date: 173864511234,
+    status: "open",
   },
   {
-    "id": 234,
-    "name": "Steuererklärung",
-    "urgency": 1,
-    "importance": 2,
-    "fun_factor": 1,
-    "duration": 30,
-    "deadline": 1345354361,
-    "depends_on": [],
-    "creation_date": 173864511234,
-    "status": "closed"
+    id: 234,
+    name: "Steuererklärung",
+    urgency: 1,
+    importance: 2,
+    fun_factor: 1,
+    duration: 30,
+    deadline: 1345354361,
+    depends_on: [],
+    creation_date: 173864511234,
+    status: "closed",
   },
   {
-    "id": 345,
-    "name": "Matheaufgaben",
-    "urgency": 3,
-    "importance": 2,
-    "fun_factor": 1,
-    "duration": 30,
-    "deadline": 1345354361,
-    "depends_on": [],
-    "creation_date": 173864511234,
-    "status": "open"
+    id: 345,
+    name: "Matheaufgaben",
+    urgency: 3,
+    importance: 2,
+    fun_factor: 1,
+    duration: 30,
+    deadline: 1345354361,
+    depends_on: [],
+    creation_date: 173864511234,
+    status: "open",
   },
   {
-    "id": 456,
-    "name": "Einkaufen",
-    "urgency": 3,
-    "importance": 2,
-    "fun_factor": 1,
-    "duration": 30,
-    "deadline": 1345354361,
-    "depends_on": [],
-    "creation_date": 173864511234,
-    "status": "open"
-  }
+    id: 456,
+    name: "Einkaufen",
+    urgency: 3,
+    importance: 2,
+    fun_factor: 1,
+    duration: 30,
+    deadline: 1345354361,
+    depends_on: [],
+    creation_date: 173864511234,
+    status: "open",
+  },
 ];
 
-export default tasks;
+export default tasks;

frontend/src/app/tinder/page.js

@@ -1,11 +1,17 @@
+"use client";
+
 import Image from "next/image";
 import styles from "./page.module.css";
 import TinderSwiper from "../components/TinderSwiper/TinderSwiper";
+import React, { useState } from "react";
+import defaultTask from "@/app/testdata/tasks";
 
 export default function Tinder() {
+  const [tasks, setTasks] = useState(defaultTask);
+
   return (
     <>
-      <TinderSwiper taskId="123" taskName="Update your node JS dependencies" />
+      <TinderSwiper tasks={tasks} />
     </>
   );
 }