move WbwTest from Home

dashboard/src/components/nut/Home.tsx

@@ -2,51 +2,19 @@ import ReactMarkdown from "react-markdown";
 import code_png from "../../assets/nut/code.png";
 import ChannelPicker from "../channel/ChannelPicker";
 import MdView from "../template/MdView";
-import { IWbw } from "../template/Wbw/WbwWord";
-import WbwSent from "../template/WbwSent";
 
 import MarkdownForm from "./MarkdownForm";
 import MarkdownShow from "./MarkdownShow";
 import FontBox from "./FontBox";
 import DemoForm from "./Form";
+import WbwTest from "./WbwTest";
 
 const Widget = () => {
-  let wbwData: IWbw[] = [];
-  const valueMake = (value: string) => {
-    return { value: value, status: 3 };
-  };
-  const valueMake2 = (value: string[]) => {
-    return { value: value, status: 3 };
-  };
-  for (let index = 0; index < 20; index++) {
-    wbwData.push({
-      word: valueMake("Word" + index),
-      real: valueMake("word" + index),
-      meaning: { value: ["意思" + index], status: 3 },
-      factors: valueMake("word+word"),
-      factorMeaning: valueMake("mean+mean"),
-      type: valueMake(".n."),
-      grammar: valueMake(".m.$.sg.$.nom."),
-      case: valueMake2(["n", "m", "sg", "nom"]),
-      confidence: 1,
-    });
-  }
   return (
     <div>
       <h1>Home</h1>
       <h2>wbw</h2>
-      <div style={{ width: 700 }}>
-        <WbwSent
-          data={wbwData}
-          display="inline"
-          fields={{
-            meaning: true,
-            factors: false,
-            factorMeaning: false,
-            case: false,
-          }}
-        />
-      </div>
+      <WbwTest />
       <h2>channel picker</h2>
       <div style={{ width: 1000 }}>
         <ChannelPicker type="chapter" articleId="168-915" />

dashboard/src/components/nut/WbwTest.tsx

@@ -0,0 +1,41 @@
+import { IWbw } from "../template/Wbw/WbwWord";
+import WbwSent from "../template/WbwSent";
+
+const Widget = () => {
+  let wbwData: IWbw[] = [];
+  const valueMake = (value: string) => {
+    return { value: value, status: 3 };
+  };
+  const valueMake2 = (value: string[]) => {
+    return { value: value, status: 3 };
+  };
+  for (let index = 0; index < 20; index++) {
+    wbwData.push({
+      word: valueMake("Word" + index),
+      real: valueMake("word" + index),
+      meaning: { value: ["意思" + index], status: 3 },
+      factors: valueMake("word+word"),
+      factorMeaning: valueMake("mean+mean"),
+      type: valueMake(".n."),
+      grammar: valueMake(".m.$.sg.$.nom."),
+      case: valueMake2(["n", "m", "sg", "nom"]),
+      confidence: 1,
+    });
+  }
+  return (
+    <div style={{ width: 700 }}>
+      <WbwSent
+        data={wbwData}
+        display="block"
+        fields={{
+          meaning: true,
+          factors: true,
+          factorMeaning: true,
+          case: true,
+        }}
+      />
+    </div>
+  );
+};
+
+export default Widget;