Adjust flip card behavior

yasuflatland-lf · Jul 2, 2024 · 47849ed · 47849ed
1 parent bc37079
commit 47849ed
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 12 deletions.
diff --git a/frontend/src/components/SwipeableCard.tsx b/frontend/src/components/SwipeableCard.tsx
@@ -21,15 +21,22 @@ function SwipeableCard({ content, onSwiped }: SwipeableCardProps) {
     onSwipedUp: () => handleSwipe("up"),
     onSwipedDown: () => handleSwipe("down"),
     onSwiping: (eventData) => handleSwiping(eventData),
+    onTap: (eventData) => handleTapping(eventData),
   });
 
   const handleSwipe = (dir: string) => {
-    setWatermark(null);
-    setIsFlipped(true);
-    setTimeout(() => {
+    if(dir === "up" ) {
+      setWatermark(null);
+      setIsFlipped(true);
+    } else {
+      setWatermark(null);
       onSwiped(dir);
-      setIsFlipped(false);
-    }, 600); // Match the duration of the CSS transition
+    }
+  };
+
+  const handleTapping = ({ dir }: { dir: string }) => {
+    setIsFlipped(false);
+    console.log(dir);
   };
 
   const handleSwiping = ({ dir }: { dir: string }) => {

diff --git a/frontend/src/pages/Error404.tsx b/frontend/src/pages/Error404.tsx
@@ -3,12 +3,15 @@ import { Link } from "react-router-dom";
 
 const Error404 = () => {
   return (
-    <div className="flex flex-col items-center justify-center h-screen bg-gray-100 text-gray-800 text-center">
+    <div className="bg-pink-700 flex flex-col items-center justify-center h-screen text-gray-100 text-center p-8">
       <h1 className="text-6xl font-bold mb-4">404 - Page Not Found</h1>
       <p className="text-2xl mb-6">
         Sorry, the page you are looking for does not exist.
       </p>
-      <Link to="/" className="text-lg text-blue-500 hover:underline">
+      <Link
+        to="/"
+        className="bg-white text-pink-700 font-black text-lg rounded-full px-6 py-3 hover:bg-gray-200"
+      >
         Go to Home
       </Link>
     </div>

diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
@@ -13,11 +13,12 @@ function Home() {
   const [currentCardIndex, setCurrentCardIndex] = useState(0);
 
   const handleSwiped = (dir: string) => {
-    if (dir === "left") {
-      setCurrentCardIndex((prev) => (prev > 0 ? prev - 1 : cards.length - 1));
-    } else if (dir === "right") {
-      setCurrentCardIndex((prev) => (prev + 1) % cards.length);
-    }
+    setCurrentCardIndex((prev) => (prev + 1) % cards.length);
+    // if (dir === "left") {
+    //   setCurrentCardIndex((prev) => (prev > 0 ? prev - 1 : cards.length - 1));
+    // } else if (dir === "right") {
+    //   setCurrentCardIndex((prev) => (prev + 1) % cards.length);
+    // }
   };
 
   return (