good tandem good tandem of ideas and implementation

1 files changed, 15 insertions, 1 deletions

diff --git a/src/components/Flashcard/Card.tsx b/src/components/Flashcard/Card.tsx
index 7cada24..9eccdb5 100644
--- a/src/components/Flashcard/Card.tsx
+++ b/src/components/Flashcard/Card.tsx
@@ -1,6 +1,9 @@
 "use client";
 
+import { thaiAnalysis } from "@/actions/lang";
 import { CardResponse } from "@/lib/types/cards";
+import { useTransition } from "react";
+import { Spinner } from "../ui/spinner";
 
 // export default function ({ user }: { user: { name: string; id: number } }) {
 //   const [state, formAction, isPending] = useActionState(postLogout, 0);
@@ -58,6 +61,13 @@ const Flashcard: React.FC<FlashcardProps> = ({
     }
   };
 
+  const [isPending, startTransition] = useTransition();
+  const handleClick = () => {
+    startTransition(async () => {
+      const res = await thaiAnalysis(data.expression.spelling);
+    });
+  };
+
   return (
     <div
       className={`w-full max-w-md h-80 perspective group ${getAnimationClass()}`}
@@ -77,9 +87,13 @@ const Flashcard: React.FC<FlashcardProps> = ({
               </span>
             ))}
           </span>
-          <p className="text-3xl md:text-4xl font-semibold text-slate-800 dark:text-slate-100 text-center">
+          <p
+            onClick={handleClick}
+            className="text-3xl cursor-pointer hover:text-blue-700 md:text-4xl font-semibold text-slate-800 dark:text-slate-100 text-center"
+          >
             {data.expression.spelling}
           </p>
+          {isPending && <Spinner />}
           <div className="w-full h-6">
             {" "}
             {/* Placeholder for spacing, mimics bottom controls */}