add description

dashboard/src/components/dict/WordCardByDict.tsx

@@ -1,13 +1,15 @@
-import { Card } from "antd";
+import { Button, Card, Popover, Space } from "antd";
 import { Typography } from "antd";
-import MdView from "../template/MdView";
+import { InfoCircleOutlined } from "@ant-design/icons";
 
-import GrammarPop from "./GrammarPop";
+import Marked from "../general/Marked";
+import MdView from "../template/MdView";
 
-const { Title, Text } = Typography;
+const { Title } = Typography;
 
 export interface IWordByDict {
   dictname: string;
+  description?: string;
   word: string;
   note: string;
   anchor: string;
@@ -18,9 +20,20 @@ interface IWidgetWordCardByDict {
 const WordCardByDictWidget = (prop: IWidgetWordCardByDict) => {
   return (
     <Card>
-      <Title level={5} id={prop.data.anchor}>
-        {prop.data.dictname}
-      </Title>
+      <Space>
+        <Title level={5} id={prop.data.anchor}>
+          {prop.data.dictname}
+        </Title>
+        {prop.data.description ? (
+          <Popover
+            overlayStyle={{ maxWidth: 600 }}
+            content={<Marked text={prop.data.description} />}
+            placement="bottom"
+          >
+            <Button type="link" icon={<InfoCircleOutlined />} />
+          </Popover>
+        ) : undefined}
+      </Space>
       <div>
         <MdView html={prop.data.note} />
       </div>