diff options
Diffstat (limited to 'src/components/Flashcard/ServerCard.tsx')
| -rw-r--r-- | src/components/Flashcard/ServerCard.tsx | 13 |
1 files changed, 7 insertions, 6 deletions
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}`}> |