src/components/Flashcard/Syllable.tsx


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

"use client";

import { syllableAction, thaiAnalysis } from "@/actions/lang";
import { CardResponse } from "@/lib/types/cards";
import { ReactNode, useState, useTransition } from "react";
import { Spinner } from "../ui/spinner";
import Modal from "@/components/Modal";
import { getRandomHexColor } from "@/lib/utils";

const SyllableCard: React.FC<{ data: CardResponse }> = ({ data }) => {
  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">
      <p className="text-5xl cursor-pointer hover:text-blue-700 font-semibold text-slate-800 dark:text-slate-100 text-center">
        {data.expression.spelling}
      </p>
      <IpaDisplay ipaEntries={data.expression.ipa} />
    </div>
  );
};

export default SyllableCard;

const IpaDisplay = ({
  ipaEntries,
}: {
  ipaEntries: Array<{ ipa: string; tags?: string[] }>;
}) => {
  if (!ipaEntries || ipaEntries.length === 0) return null;
  return (
    <div className="flex items-center space-x-2 flex-wrap">
      {ipaEntries.map((entry, index) => {
        const tags = entry.tags ? entry.tags : [];
        return (
          <span key={index} className="text-lg text-blue-600 font-serif">
            {entry.ipa}{" "}
            {tags.length > 0 && (
              <span className="text-xs text-gray-500">({tags.join(", ")})</span>
            )}
          </span>
        );
      })}
    </div>
  );
};