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/ServerCard.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

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

diff --git a/src/components/Flashcard/ServerCard.tsx b/src/components/Flashcard/ServerCard.tsx
index 75442b4..d377dce 100644
--- a/src/components/Flashcard/ServerCard.tsx
+++ b/src/components/Flashcard/ServerCard.tsx
@@ -25,11 +25,12 @@ import {
 import { CardResponse } from "@/lib/types/cards";
 import { thaiData } from "@/pages/api/nlp";
 import { getRandomHexColor } from "@/lib/utils";
+import { BookmarkIconito } from "./BookmarkButton";
 
 export async function CardFront({ data }: { data: CardResponse }) {
   // const extraData = data.expression.lang
   const extraData = await thaiData(data.expression.spelling);
-  console.log({ extraData });
+  // console.log({ extraData });
 
   return (
     <div className="absolute w-full h-full bg-white dark:bg-slate-800 rounded-xl backface-hidden flex flex-col justify-center gap-8 items-center p-6">
@@ -41,10 +42,11 @@ export async function CardFront({ data }: { data: CardResponse }) {
         }
       >
         <p className="text-5xl cursor-pointer font-semibold text-slate-800 dark:text-slate-100 text-center">
-          {extraData[0]?.syllables.map((syl) => (
+          {extraData[0]?.syllables.map((syl, i) => (
             <span
+              key={syl + i}
               style={{ color: getRandomHexColor() }}
-              className="m-1 hover:text-6l"
+              className="m-1 hover:text-6xl"
             >
               {syl}
             </span>
@@ -92,10 +94,9 @@ export const IpaDisplay = ({
 };
 
 export async function CardBack({ data }: { data: CardResponse }) {
-  // <BookmarkIcon onClick={handleClick} className="absolute top-5 right-10" />
   return (
-    <div className="absolute w-full h-full bg-slate-50 dark:bg-slate-700 rounded-xl backface-hidden rotate-y-180 flex flex-col justify-between items-center p-6 relative">
-      <BookmarkIcon className="absolute top-5 right-10" />
+    <div className="w-full h-full bg-slate-50 dark:bg-slate-700 rounded-xl backface-hidden rotate-y-180 flex flex-col justify-between items-center p-6 relative">
+      <BookmarkIconito card={data} />
       <span className="text-lg text-slate-500 dark:text-slate-400 self-start">
         {data.expression.senses.map((ss, i) => (
           <div key={`ss${i}`}>
-- 
cgit v1.2.3