wip

components/ComponentPaletteDrawer.tsx

@@ -1,11 +1,19 @@
 "use client";
 import "@/app/globals.css";
-import { useRef } from "react";
+import { useRef, useState } from "react";
+import ComponentsStore from "@/stores/componentStore";
+import { componentsLibrary } from "./Draggable/Draggable";
+import { useDynamicWidgets } from "@/hooks/useDynamicWidgets";
+
 export default function ComponentPaletteDrawer() {
   const checkboxRef = useRef<HTMLInputElement>(null);
+  const [componentsId, setComponentsId] = useState("logo");
+  const [data, setData] = useState("");
+  const {widgets} = useDynamicWidgets();
 
   const onSubmit = (e: SubmitEvent) => {
     e.preventDefault();
+    ComponentsStore.addComponent(componentsId, data && JSON.parse(data));
     checkboxRef.current?.click();
   };
   return (
@@ -25,7 +33,7 @@ export default function ComponentPaletteDrawer() {
           Add Component
         </label>
       </div>
-      <div className="drawer-side">
+      <div className="drawer-side z-50">
         <label
           htmlFor="ComponentPaletteDrawer"
           aria-label="close sidebar"
@@ -37,7 +45,7 @@ export default function ComponentPaletteDrawer() {
           </div>
 
           <div className="p-4">
-            <div role="alert" className="alert alert-warning">
+            <div role="alert" className="alert alert-warning mb-4">
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 className="h-6 w-6 shrink-0 stroke-current"
@@ -53,13 +61,31 @@ export default function ComponentPaletteDrawer() {
               </svg>
               <span>Warning: 内容处于开发阶段仅供参考！</span>
             </div>
+
+            <div className="resize-y border overflow-hidden max-w-full h-64 ">
+              {
+                componentsId && componentsLibrary[componentsId](data)
+              }
+            </div>
+
+            {
+              JSON.stringify(widgets)
+            }
+
             <form onSubmit={onSubmit} className="w-full">
               <fieldset className="fieldset w-full">
                 <legend className="fieldset-legend">小部件</legend>
-                <select defaultValue="请选择小部件" className="select w-full">
+                <select
+                value={componentsId}
+                  onChange={(e) => setComponentsId(e.target.value)}
+                  className="select w-full"
+                >
                   <option disabled={true}>请选择小部件</option>
-                  <option>文本</option>
-                  <option>Logo</option>
+                  {
+                    widgets.map(item => {
+                      return (<option value={item.id}>{item.name}</option>)
+                    })
+                  }
                 </select>
                 <p className="fieldset-label">你可以选择一款你喜欢的小部件</p>
               </fieldset>
@@ -67,9 +93,11 @@ export default function ComponentPaletteDrawer() {
               <fieldset className="fieldset w-full">
                 <legend className="fieldset-legend">配置信息</legend>
                 <textarea
+                  onChange={(e) => setData(e.target.value)}
                   className="textarea h-24 w-full"
                   placeholder="请输入 JSON 格式的配置信息"
                 ></textarea>
+
                 <p className="fieldset-label">JSON格式的配置信息</p>
               </fieldset>
               <button className="btn w-full btn-primary">确认</button>