the card flip animation is legit

1 files changed, 151 insertions, 0 deletions

diff --git a/src/components/Flashcard/Deck.tsx b/src/components/Flashcard/Deck.tsx
new file mode 100644
index 0000000..d3c736f
--- /dev/null
+++ b/src/components/Flashcard/Deck.tsx
@@ -0,0 +1,151 @@
+"use client";
+
+import { CardResponse, DeckResponse } from "@/lib/types/cards";
+import React, { useCallback, useEffect, useState } from "react";
+import { Button } from "../ui/button";
+import { ChevronLeftIcon, ChevronRightIcon, RotateCcwIcon } from "lucide-react";
+import "./cards.css";
+import Flashcard from "./Card";
+
+// --- Main App Component ---
+function Deck({ data }: { data: DeckResponse }) {
+  const [currentPage, setCurrentPage] = useState<number>(0);
+  const [currentIndex, setCurrentIndex] = useState<number>(0);
+  const [isFlipped, setIsFlipped] = useState<boolean>(false);
+  const [animationDirection, setAnimationDirection] = useState<
+    "enter-left" | "enter-right" | "exit-left" | "exit-right" | "none"
+  >("none");
+  const flashcards = data.cards;
+  const [isAnimating, setIsAnimating] = useState<boolean>(false);
+
+  const handleFlip = () => {
+    if (isAnimating) return;
+    setIsFlipped(!isFlipped);
+  };
+
+  const handleNext = useCallback(() => {
+    if (isAnimating || currentIndex >= flashcards.length - 1) return;
+    setIsAnimating(true);
+    setIsFlipped(false); // Flip back to front before changing card
+    setAnimationDirection("exit-left");
+
+    setTimeout(() => {
+      setCurrentIndex((prevIndex) =>
+        Math.min(prevIndex + 1, flashcards.length - 1),
+      );
+      setAnimationDirection("enter-right");
+      setTimeout(() => {
+        setAnimationDirection("none");
+        setIsAnimating(false);
+      }, 500); // Duration of enter animation
+    }, 500); // Duration of exit animation
+  }, [currentIndex, flashcards.length, isAnimating]);
+
+  const handlePrev = useCallback(() => {
+    if (isAnimating || currentIndex <= 0) return;
+    setIsAnimating(true);
+    setIsFlipped(false); // Flip back to front
+    setAnimationDirection("exit-right");
+
+    setTimeout(() => {
+      setCurrentIndex((prevIndex) => Math.max(prevIndex - 1, 0));
+      setAnimationDirection("enter-left");
+      setTimeout(() => {
+        setAnimationDirection("none");
+        setIsAnimating(false);
+      }, 500); // Duration of enter animation
+    }, 500); // Duration of exit animation
+  }, [currentIndex, isAnimating]);
+
+  // Keyboard navigation
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (isAnimating) return;
+      if (event.key === "ArrowRight") {
+        handleNext();
+      } else if (event.key === "ArrowLeft") {
+        handlePrev();
+      } else if (event.key === " " || event.key === "Enter") {
+        // Space or Enter to flip
+        event.preventDefault(); // Prevent scrolling if space is pressed
+        handleFlip();
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleNext, handlePrev, isAnimating]);
+
+  if (flashcards.length === 0) {
+    return (
+      <div className="min-h-screen bg-slate-50 dark:bg-slate-900 flex flex-col items-center justify-center p-4 font-inter text-slate-800 dark:text-slate-200">
+        <p>No flashcards available.</p>
+      </div>
+    );
+  }
+
+  const currentCard = flashcards[currentIndex];
+  if (!currentCard) return <p>wtf</p>;
+
+  return (
+    <div className="min-h-screen bg-slate-100 dark:bg-slate-900 flex flex-col items-center justify-center p-4 font-inter transition-colors duration-300">
+      <div className="w-full max-w-md mb-8 relative">
+        {/* This div is for positioning the card and managing overflow during animations */}
+        <div className="relative h-80">
+          {" "}
+          {/* Ensure this matches card height */}
+          <Flashcard
+            key={currentCard.id} // Important for re-rendering on card change with animation
+            data={currentCard}
+            isFlipped={isFlipped}
+            onFlip={handleFlip}
+            animationDirection={animationDirection}
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between w-full max-w-md mb-6">
+        <Button
+          onClick={handlePrev}
+          disabled={currentIndex === 0 || isAnimating}
+          variant="outline"
+          size="icon"
+          aria-label="Previous card"
+        >
+          <ChevronLeftIcon />
+        </Button>
+        <div className="text-center">
+          <p className="text-sm text-slate-600 dark:text-slate-400">
+            Card {currentIndex + 1} of {flashcards.length}
+          </p>
+          <Button
+            onClick={handleFlip}
+            variant="ghost"
+            size="sm"
+            className="mt-1 text-slate-600 dark:text-slate-400"
+            disabled={isAnimating}
+          >
+            <RotateCcwIcon className="w-4 h-4 mr-2" /> Flip Card
+          </Button>
+        </div>
+        <Button
+          onClick={handleNext}
+          disabled={currentIndex === flashcards.length - 1 || isAnimating}
+          variant="outline"
+          size="icon"
+          aria-label="Next card"
+        >
+          <ChevronRightIcon />
+        </Button>
+      </div>
+
+      <div className="text-xs text-slate-500 dark:text-slate-400 mt-8">
+        Use Arrow Keys (← →) to navigate, Space/Enter to flip.
+      </div>
+    </div>
+  );
+}
+
+export default Deck;