chore: update the widget description

package.json

@@ -123,6 +123,7 @@
     "@types/masonry-layout": "^4.2.5",
     "@types/react-helmet": "^6.1.5",
     "@types/react-linkify": "^1.0.1",
+    "@types/react-syntax-highlighter": "^15.5.5",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.42.0",
     "@typescript-eslint/parser": "^5.42.0",

src/routes/setting/Widget.tsx

@@ -21,31 +21,24 @@ export default function Widget() {
   return (
     <div className="flex flex-col justify-start items-start">
       <div className="text-gray-600 ">
-        Extending VoceChat by embedding vocechat widget SDK!
+        Extending VoceChat by embedding the vocechat widget SDK!
       </div>
       <label htmlFor="code" className="text-gray-500 text-sm mt-5">
         Code Example:
       </label>
-      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus}>
+      <SyntaxHighlighter id="code" language="html" style={vscDarkPlus} className="rounded">
         {`<!-- put this code snippet into your html file -->\n<script \n  data-host-id="4" \n  data-origin="${location.origin}" \n  data-close-width="52" \n  data-close-height="52" \n  data-open-width="600" \n  data-open-height="800" \n  src="${location.origin}/widget.js" \n  async \n/>`}
       </SyntaxHighlighter>
       <div className="text-gray-500 text-sm mt-5 mb-2">
         Configuration Description:
       </div>
-      <div className="w-[700px] border border-solid border-gray-300">
+      <div className="w-[700px] border border-solid border-gray-300 rounded overflow-hidden">
-
+        <table className="min-w-full table-auto">
-        <table className="min-w-full border table-auto">
           <thead className="border-b bg-gray-50">
             <tr>
-              <th scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
+              {["Parameter Key", "Default Value", "Remarks"].map(title => <th key={title} scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
-                Configuration Key
+                {title}
-              </th>
+              </th>)}
-              <th scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
-                Default Value
-              </th>
-              <th scope="col" className="text-sm font-bold text-gray-900 px-6 py-4 text-left">
-                Remarks
-              </th>
             </tr>
           </thead>
           <tbody>
@@ -76,10 +69,12 @@ export default function Widget() {
             }
             ].map(row => <Row key={row.paramKey} {...row} />)}
           </tbody>
-          <tfoot className="border-t border-solid border-gray-200">
+          <tfoot className="border-t border-solid border-gray-200" >
-            <div className="text-gray-400 px-5 py-3 text-sm">
+            <tr>
-              * <code className="bg-gray-700 text-white px-1">data-</code> prefixed
+              <td colSpan={3} className="text-gray-400 px-5 py-3 text-sm">
-            </div>
+                * All the parameters are optional, and prefixed by <i className="bg-gray-700 text-white px-1">data-</i>
+              </td>
+            </tr>
           </tfoot>
         </table>
       </div>

yarn.lock

@@ -3249,6 +3249,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-syntax-highlighter@^15.5.5":
+  version "15.5.5"
+  resolved "https://mirrors.cloud.tencent.com/npm/@types%2freact-syntax-highlighter/-/react-syntax-highlighter-15.5.5.tgz#4d3b51f8956195f1f63360ff03f8822c5d74c516"
+  integrity sha512-QH3JZQXa2usAvJvSsdSUJ4Yu4j8ReuZpgRrEW+XP+Rmosbn425YshW9iGEb/pAARm8496axHhHUPRH3UmTiB6A==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*":
   version "18.0.20"
   resolved "https://mirrors.cloud.tencent.com/npm/@types%2freact/-/react-18.0.20.tgz#e4c36be3a55eb5b456ecf501bd4a00fd4fd0c9ab"