:construction: add random string demo

dashboard/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@ant-design/charts": "^1.4.2",
-    "@ant-design/pro-components": "^2.3.25",
+    "@ant-design/pro-components": "^2.3.27",
     "@fortawesome/fontawesome-free": "^6.2.0",
     "@reduxjs/toolkit": "^1.8.6",
     "@testing-library/jest-dom": "^5.14.1",
@@ -13,15 +13,16 @@
     "@types/google-protobuf": "^3.15.6",
     "@types/jest": "^27.0.1",
     "@types/js-cookie": "^3.0.2",
+    "@types/lodash": "^4.14.187",
     "@types/node": "^16.7.13",
     "@types/react": "^18.0.0",
     "@types/react-big-calendar": "^0.38.2",
     "@types/react-color": "^3.0.6",
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.0",
-    "@types/react-pdf": "^5.7.2",
-    "@uiw/react-md-editor": "^3.19.1",
-    "antd": "^4.23.6",
+    "@types/react-pdf": "^5.7.3",
+    "@uiw/react-md-editor": "^3.19.5",
+    "antd": "^4.24.0",
     "dayjs": "^1.11.6",
     "dinero.js": "^2.0.0-alpha.8",
     "emoji-mart": "^5.2.2",
@@ -31,9 +32,10 @@
     "filesize": "^10.0.5",
     "google-map-react": "^2.2.0",
     "google-protobuf": "^3.21.2",
-    "grpc-web": "^1.4.1",
+    "grpc-web": "^1.4.2",
     "js-cookie": "^3.0.1",
     "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
     "qrcode.react": "^3.1.0",
     "react": "^18.2.0",
     "react-big-calendar": "^1.5.0",
@@ -43,17 +45,17 @@
     "react-draggable": "^4.4.5",
     "react-dropzone": "^14.2.3",
     "react-highlight-words": "^0.18.0",
-    "react-hook-form": "^7.38.0",
+    "react-hook-form": "^7.39.1",
     "react-image-crop": "^10.0.8",
     "react-intl": "^6.2.1",
     "react-json-view": "^1.21.3",
     "react-markdown": "^8.0.3",
-    "react-number-format": "^5.1.0",
+    "react-number-format": "^5.1.1",
     "react-pdf": "^5.7.2",
     "react-player": "^2.11.0",
     "react-quill": "^2.0.0",
     "react-redux": "^8.0.4",
-    "react-router-dom": "^6.4.2",
+    "react-router-dom": "^6.4.3",
     "react-scripts": "5.0.1",
     "react-sparklines": "^1.7.0",
     "react-syntax-highlighter": "^15.5.0",

dashboard/src/pages/nut/index.tsx

@@ -1,29 +1,63 @@
-import { Tag } from "antd";
+import { useState } from "react";
+import { Tag, Space, Button } from "antd";
+import lodash from "lodash";
+
 import FooterBar from "../../components/library/FooterBar";
 
 import HeadBar from "../../components/library/HeadBar";
 import Home from "../../components/nut/Home";
 
+interface IRandomPanel {
+  v1: string;
+  v2: string;
+}
+
 const Widget = () => {
-	return (
-		<div>
-			<HeadBar />
-			<div>Home Page</div>
-			<div>
-				<Tag
-					onClick={() => {
-						console.log("test tag was clicked");
-					}}
-				>
-					Test
-				</Tag>
-			</div>
-			<div>
-				<Home />
-			</div>
-			<FooterBar />
-		</div>
-	);
+  const [rdp, setRdp] = useState<IRandomPanel>({
+    v1: "",
+    v2: "",
+  });
+  return (
+    <div>
+      <HeadBar />
+      <div>Home Page</div>
+      <div>
+        <h1>random</h1>
+        <Space style={{ color: "red" }}>{rdp.v1}</Space>
+        &nbsp;
+        <Space style={{ color: "green" }}>{rdp.v2}</Space>
+        &nbsp;
+        <Button
+          onClick={() => {
+            setRdp({
+              v1: Array.from(Array(20), () =>
+                Math.floor(Math.random() * 36).toString(36)
+              ).join(""),
+              v2: lodash
+                .times(20, () => lodash.random(35).toString(36))
+                .join(""),
+            });
+          }}
+        >
+          Generate
+        </Button>
+      </div>
+      <br />
+      <div>
+        <Tag
+          onClick={() => {
+            console.log("test tag was clicked");
+          }}
+        >
+          Test
+        </Tag>
+      </div>
+      <div>
+        <Home />
+      </div>
+      <FooterBar />
+    </div>
+  );
 };
 
 export default Widget;