1 files changed, 14 insertions, 5 deletions
diff --git a/src/components/tones/ToneSelectorClient.tsx b/src/components/tones/ToneSelectorClient.tsx
index 8abbd38..438fc8a 100644
--- a/src/components/tones/ToneSelectorClient.tsx
+++ b/src/components/tones/ToneSelectorClient.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import { Spinner } from "@/components/ui/spinner";
+import "../Flashcard/cards.css";
 import { useState, useEffect, useTransition, useRef, useCallback } from "react";
 import { WordData } from "@/zoom/logic/types";
 import {
@@ -25,7 +26,7 @@ import {
 } from "@/components/ui/card";
 import { Label } from "@/components/ui/label";
 import { Skeleton } from "@/components/ui/skeleton"; // For loading state
-import { MutationOrder, ToneQuery } from "@/lib/types/phonetics";
+import { MutationOrder, PhoneticData, ToneQuery } from "@/lib/types/phonetics";
 import { ProsodySyllable } from "@/lib/types/cards";
 import { ArrowLeft, ArrowRight, Volume2, FlipHorizontal2 } from "lucide-react";
 
@@ -131,9 +132,10 @@ export default function ToneSelectorClient({
   initialData,
   initialTones,
 }: {
-  initialData: any[];
+  initialData: PhoneticData[];
   initialTones: ToneQuery;
 }) {
+  console.log({ initialData });
   const [data, setData] = useState<any[]>(initialData);
   const [currentIdx, setCurrentIdx] = useState(0);
   const [isLoading, startTransition] = useTransition();
@@ -187,7 +189,7 @@ export default function ToneSelectorClient({
 }
 type IProps = {
   isLoading: boolean;
-  currentWord: any;
+  currentWord: PhoneticData;
   goPrev: () => void;
   goNext: () => void;
 };
@@ -225,6 +227,7 @@ function Inner({ isLoading, currentWord, goPrev, goNext }: IProps) {
       </Card>
     );
   }
+  console.log({ currentWord });
 
   return (
     <div className="relative w-full max-w-2xl mx-auto h-100 perspective">
@@ -242,7 +245,10 @@ function Inner({ isLoading, currentWord, goPrev, goNext }: IProps) {
         }`}
       >
         {/* Front */}
-        <div className="absolute inset-0 bg-white dark:bg-slate-800 rounded-xl backface-hidden flex flex-col">
+        <div
+          id="frontside"
+          className="absolute inset-0 bg-white dark:bg-slate-800 rounded-xl backface-hidden flex flex-col"
+        >
           <div className="px-6 pt-6 pb-2">
             <h3 className="text-center text-lg font-semibold">Current Word</h3>
           </div>
@@ -256,7 +262,10 @@ function Inner({ isLoading, currentWord, goPrev, goNext }: IProps) {
         </div>
 
         {/* Back */}
-        <div className="absolute inset-0 bg-slate-50 dark:bg-slate-700 rounded-xl backface-hidden rotate-y-180 flex flex-col">
+        <div
+          id="backside"
+          className="absolute inset-0 bg-slate-50 dark:bg-slate-700 rounded-xl backface-hidden rotate-y-180 flex flex-col"
+        >
           <div className="px-6 pt-6 pb-2">
             <h3 className="text-center text-lg font-semibold">Details</h3>
           </div>