wip

components/ComponentPaletteDrawer.tsx

@@ -0,0 +1,82 @@
+"use client";
+import "@/app/globals.css";
+import { useRef } from "react";
+export default function ComponentPaletteDrawer() {
+  const checkboxRef = useRef<HTMLInputElement>(null);
+
+  const onSubmit = (e: SubmitEvent) => {
+    e.preventDefault();
+    checkboxRef.current?.click();
+  };
+  return (
+    <div className="drawer drawer-end">
+      <input
+        ref={checkboxRef}
+        id="ComponentPaletteDrawer"
+        type="checkbox"
+        className="drawer-toggle"
+      />
+      <div className="drawer-content">
+        {/* Page content here */}
+        <label
+          htmlFor="ComponentPaletteDrawer"
+          className="drawer-button btn btn-primary"
+        >
+          Add Component
+        </label>
+      </div>
+      <div className="drawer-side">
+        <label
+          htmlFor="ComponentPaletteDrawer"
+          aria-label="close sidebar"
+          className="drawer-overlay"
+        ></label>
+        <div className="menu min-h-full w-2/5 bg-base-200 p-0 text-base-content">
+          <div className="navbar bg-base-100 shadow-sm">
+            <a className="btn text-xl btn-ghost">daisyUI</a>
+          </div>
+
+          <div className="p-4">
+            <div role="alert" className="alert alert-warning">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                className="h-6 w-6 shrink-0 stroke-current"
+                fill="none"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                />
+              </svg>
+              <span>Warning: 内容处于开发阶段仅供参考！</span>
+            </div>
+            <form onSubmit={onSubmit} className="w-full">
+              <fieldset className="fieldset w-full">
+                <legend className="fieldset-legend">小部件</legend>
+                <select defaultValue="请选择小部件" className="select w-full">
+                  <option disabled={true}>请选择小部件</option>
+                  <option>文本</option>
+                  <option>Logo</option>
+                </select>
+                <p className="fieldset-label">你可以选择一款你喜欢的小部件</p>
+              </fieldset>
+
+              <fieldset className="fieldset w-full">
+                <legend className="fieldset-legend">配置信息</legend>
+                <textarea
+                  className="textarea h-24 w-full"
+                  placeholder="请输入 JSON 格式的配置信息"
+                ></textarea>
+                <p className="fieldset-label">JSON格式的配置信息</p>
+              </fieldset>
+              <button className="btn w-full btn-primary">确认</button>
+            </form>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}