From 7abf2227438362ad30820ee236405ec1b57a40b6 Mon Sep 17 00:00:00 2001
From: polwex <polwex@sortug.com>
Date: Wed, 21 May 2025 17:13:11 +0700
Subject: m

---
 src/components/Flashcard/Deck2.tsx | 29 ++++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

(limited to 'src/components/Flashcard/Deck2.tsx')

diff --git a/src/components/Flashcard/Deck2.tsx b/src/components/Flashcard/Deck2.tsx
index 4fd8740..3194037 100644
--- a/src/components/Flashcard/Deck2.tsx
+++ b/src/components/Flashcard/Deck2.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import { CardResponse, DeckResponse } from "@/lib/types/cards";
-import React, { ReactNode, useCallback, useEffect, useState } from "react";
+import React, {
+  ReactNode,
+  useCallback,
+  useEffect,
+  useState,
+  useTransition,
+} from "react";
 import { Button } from "../ui/button";
 import { ChevronLeftIcon, ChevronRightIcon, RotateCcwIcon } from "lucide-react";
 import "./cards.css";
@@ -39,8 +45,8 @@ function Deck({ data, cards }: { data: DeckResponse; cards: CardData[] }) {
       setTimeout(() => {
         setAnimationDirection("none");
         setIsAnimating(false);
-      }, 500); // Duration of enter animation
-    }, 500); // Duration of exit animation
+      }, 200); // Duration of enter animation
+    }, 200); // Duration of exit animation
   }, [currentIndex, cards.length, isAnimating]);
 
   const handlePrev = useCallback(() => {
@@ -55,8 +61,8 @@ function Deck({ data, cards }: { data: DeckResponse; cards: CardData[] }) {
       setTimeout(() => {
         setAnimationDirection("none");
         setIsAnimating(false);
-      }, 500); // Duration of enter animation
-    }, 500); // Duration of exit animation
+      }, 200); // Duration of enter animation
+    }, 200); // Duration of exit animation
   }, [currentIndex, isAnimating]);
 
   // Keyboard navigation
@@ -80,6 +86,14 @@ function Deck({ data, cards }: { data: DeckResponse; cards: CardData[] }) {
     };
   }, [handleNext, handlePrev, isAnimating]);
 
+  const [isPending, startTransition] = useTransition();
+  const shuffle = () => {
+    startTransition(async () => {
+      "use server";
+      console.log("shuffling deck...");
+    });
+  };
+
   if (cards.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">
@@ -93,6 +107,10 @@ function Deck({ data, cards }: { data: DeckResponse; cards: CardData[] }) {
 
   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">
+      <header>
+        <h1 className="text-2xl ">Deck: {data.lesson.name}</h1>
+        <p>{data.lesson.description}</p>
+      </header>
       <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">
@@ -145,6 +163,7 @@ function Deck({ data, cards }: { data: DeckResponse; cards: CardData[] }) {
       <div className="text-xs text-slate-500 dark:text-slate-400 mt-8">
         Use Arrow Keys (← →) to navigate, Space/Enter to flip.
       </div>
+      <Button onClick={shuffle}>Shuffle Deck</Button>
     </div>
   );
 }
-- 
cgit v1.2.3