create

dashboard-v4/dashboard/src/components/dict/DictInfoCopyRef.tsx

@@ -0,0 +1,61 @@
+import { Button, message, Segmented, Typography } from "antd";
+import { SegmentedValue } from "antd/lib/segmented";
+import { useState } from "react";
+import { CopyOutlined } from "@ant-design/icons";
+import { IWordByDict } from "./WordCardByDict";
+import { useIntl } from "react-intl";
+const { Text } = Typography;
+
+interface IWidget {
+  data: IWordByDict;
+}
+const DictInfoCopyRef = ({ data }: IWidget) => {
+  const apaStr = `${data.meta?.author}. (${data.meta?.published_at}). ${data.dictname}. ${data.meta?.publisher}.`;
+  const mlaStr = `${data.meta?.author}. ${data.dictname}.  ${data.meta?.publisher}, ${data.meta?.published_at}.`;
+  const [text, setText] = useState(apaStr);
+  const intl = useIntl();
+
+  return (
+    <div>
+      <div style={{ textAlign: "center", padding: 20 }}>
+        <Segmented
+          options={["APA", "MLA"]}
+          onChange={(value: SegmentedValue) => {
+            switch (value) {
+              case "APA":
+                setText(apaStr);
+                break;
+              case "MLA":
+                setText(mlaStr);
+                break;
+              default:
+                break;
+            }
+          }}
+        />
+      </div>
+      <div>
+        <Text>{text}</Text>
+      </div>
+
+      <div style={{ textAlign: "center", padding: 20 }}>
+        <Button
+          type="primary"
+          style={{ width: 200 }}
+          icon={<CopyOutlined />}
+          onClick={() => {
+            navigator.clipboard.writeText(text).then(() => {
+              message.success("链接地址已经拷贝到剪贴板");
+            });
+          }}
+        >
+          {intl.formatMessage({
+            id: "buttons.copy",
+          })}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default DictInfoCopyRef;