mint/dashboard/src/components/dict/WordCard.tsx

/* eslint-disable jsx-a11y/anchor-is-valid */
import { Space, Typography } from "antd";

import type { IWordByDict } from "./WordCardByDict";
import IWidgetGrammarPop from "./GrammarPop";
import WordCardByDict from "./WordCardByDict";
import { useIntl } from "react-intl";

const { Title, Text } = Typography;

export interface IWordGrammar {
  word: string;
  type: string;
  grammar: string;
  parent: string;
  factors: string;
  confidence: number;
}
export interface IWidgetWordCardData {
  word: string;
  factors: string;
  parents: string;
  case: string[];
  grammar: IWordGrammar[];
  anchor: string;
  dict: IWordByDict[];
}
interface IWidgetWordCard {
  data: IWidgetWordCardData;
}
const Widget = ({ data }: IWidgetWordCard) => {
  const intl = useIntl();
  const caseList = data.case.map((element) => {
    return element.split("|").map((it, id) => {
      if (it.slice(0, 1) === "@") {
        const [showText, keyText] = it.slice(1).split("-");
        return <IWidgetGrammarPop key={id} gid={keyText} text={showText} />;
      } else {
        return <span key={id * 200}>{it}</span>;
      }
    });
  });
  return (
    <>
      <Title level={4} id={data.anchor}>
        {data.word}
      </Title>

      <div>
        <Text>{data.grammar.length > 0 ? data.grammar[0].factors : ""}</Text>
      </div>
      <div>
        <Text>{data.parents}</Text>
      </div>
      <div>
        {data.grammar
          .filter((item) => item.confidence > 0.5)
          .map((it, id) => {
            const grammar = it.grammar.split("$");
            const grammarGuide = grammar.map((item, id) => {
              const strCase = item.replaceAll(".", "");
              return (
                <IWidgetGrammarPop
                  key={id}
                  gid={`grammar_${strCase}`}
                  text={intl.formatMessage({
                    id: `dict.fields.type.${strCase}.label`,
                  })}
                />
              );
            });
            return (
              <div key={id}>
                <Space>{grammarGuide}</Space>
              </div>
            );
          })}
      </div>
      <div>
        <Text>{caseList}</Text>
      </div>
      <div>
        {data.dict.map((it, id) => {
          return <WordCardByDict key={id} data={it} />;
        })}
      </div>
    </>
  );
};

export default Widget;