style(promptpage): improve UI appearance

rockbenben · Feb 18, 2024 · fc39054 · fc39054
1 parent e1ec506
commit fc39054
Showing 1 changed file with 26 additions and 42 deletions.
diff --git a/src/pages/_components/PromptPage.tsx b/src/pages/_components/PromptPage.tsx
@@ -1,26 +1,28 @@
-import React, { useContext, useState, useEffect, useCallback } from "react";
-import { Card, Typography, Tag, Tooltip, Space, Badge, Row, Col } from "antd";
+import React, { useContext, useState, useCallback } from "react";
+import { Card, Typography, Tag, Tooltip, Space, Row, Col, Badge, Button } from "antd";
+import { LinkOutlined, CopyOutlined, CheckOutlined } from "@ant-design/icons";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
-import { LinkOutlined } from "@ant-design/icons";
-import clsx from "clsx";
 import Translate from "@docusaurus/Translate";
 import copy from "copy-text-to-clipboard";
-import styles from "./ShowcaseCard/styles.module.css";
 import ShareButtons from "./ShareButtons";
 import Comments from "./Comments";
 import { AuthContext } from "@site/src/pages/_components/AuthContext";
 import { updateCopyCount } from "@site/src/api";
 
 function PromptPage({ prompt }) {
   const { userAuth } = useContext(AuthContext);
-  const [url, setUrl] = useState("");
-  useEffect(() => {
-    setUrl(window.location.href);
-  }, []);
+  const [copied, setShowCopied] = useState(false);
   const { i18n } = useDocusaurusContext();
   const currentLanguage = i18n.currentLocale.split("-")[0];
+  const [shareUrl, setShareUrl] = useState(() => {
+    if (typeof window !== "undefined") {
+      return window.location.href;
+    }
+    return "";
+  });
+
   const title = prompt[currentLanguage].title;
   const remark = prompt[currentLanguage].remark;
   const weight = prompt.weight;
@@ -30,31 +32,17 @@ function PromptPage({ prompt }) {
   const [mainPrompt, setMainPrompt] = useState(prompt[currentLanguage].prompt);
 
   // Switching between the native language and English
-  function handleParagraphClick() {
-    // If the current language is English, do nothing
-    if (currentLanguage === "en") return;
-
-    if (mainPrompt === prompt[currentLanguage].prompt) {
-      setMainPrompt(prompt[currentLanguage].description);
-    } else {
-      setMainPrompt(prompt[currentLanguage].prompt);
-    }
-  }
+  const handleParagraphClick = useCallback(() => {
+    setMainPrompt((prevMainPrompt) => (currentLanguage !== "en" && prevMainPrompt === prompt[currentLanguage].prompt ? prompt[currentLanguage].description : prompt[currentLanguage].prompt));
+  }, [prompt, currentLanguage]);
 
   // Handle copying the mainPrompt text
-  const [copied, setShowCopied] = useState(false);
   const handleCopyClick = useCallback(async () => {
-    try {
-      if (mainPrompt) {
-        copy(mainPrompt);
-      }
-      setShowCopied(true);
-      setTimeout(() => setShowCopied(false), 2000);
-      await updateCopyCount(prompt.id);
-    } catch (error) {
-      console.error("Error updating copy count:", error);
-    }
-  }, [prompt.id, mainPrompt]);
+    copy(prompt[currentLanguage].prompt);
+    setShowCopied(true);
+    setTimeout(() => setShowCopied(false), 2000);
+    await updateCopyCount(prompt.id);
+  }, [prompt, currentLanguage]);
 
   return (
     <Layout title={title} description={remark}>
@@ -65,9 +53,9 @@ function PromptPage({ prompt }) {
             title={
               <span>
                 {title} <Badge count={"Weight: " + weight} style={{ backgroundColor: "#52c41a" }} />
-                <button className={clsx("button button--secondary button--sm")} style={{ marginLeft: "6px" }} onClick={handleCopyClick}>
+                <Button icon={copied ? <CheckOutlined /> : <CopyOutlined />} onClick={handleCopyClick} style={{ marginLeft: "6px" }}>
                   {copied ? <Translate id="theme.CodeBlock.copied">已复制</Translate> : <Translate id="theme.CodeBlock.copy">复制</Translate>}
-                </button>
+                </Button>
               </span>
             }
             extra={
@@ -77,11 +65,11 @@ function PromptPage({ prompt }) {
                 </a>
               ) : null
             }>
-            <p className={styles.showcaseCardBody}>👉 {remark}</p>
+            <Typography.Paragraph style={{ color: "#595959" }}>👉 {remark}</Typography.Paragraph>
             <Tooltip title={<Translate id="tooltip.switchLang">点击切换显示语言</Translate>}>
-              <p onClick={handleParagraphClick} className={styles.showcaseCardBody} style={{ cursor: "pointer" }}>
+              <Typography.Paragraph onClick={handleParagraphClick} style={{ cursor: "pointer", color: "#595959", maxHeight: "500px", overflowY: "auto" }}>
                 {mainPrompt}
-              </p>
+              </Typography.Paragraph>
             </Tooltip>
             <Space wrap>
               {tags.map((tag) => (
@@ -95,12 +83,8 @@ function PromptPage({ prompt }) {
             <Typography.Paragraph style={{ color: "gray", fontSize: "0.9em", marginTop: "20px" }}>
               <Translate id="comments.info">请在下方回复您对本提示词的意见、想法或分享。</Translate>
             </Typography.Paragraph>{" "}
-            <ShareButtons shareUrl={url} title={`${title}: ${remark}`} popOver={true} />
-            {userAuth && userAuth.data && userAuth.data.id ? (
-              <Comments pageId={prompt.id} currentUserId={userAuth.data.id} type="page" />
-            ) : (
-              <Comments pageId={prompt.id} currentUserId={0} type="page" />
-            )}
+            <ShareButtons shareUrl={shareUrl} title={`${title}: ${remark}`} popOver={true} />
+            <Comments pageId={prompt.id} currentUserId={userAuth?.data?.id || 0} type="page" />
           </Card>
         </Col>
       </Row>