fix form

1 files changed, 27 insertions, 8 deletions

diff --git a/packages/exchange-backoffice-ui/src/Dashborad.tsx b/packages/exchange-backoffice-ui/src/Dashborad.tsx
index a540caa8d..19ea4a31c 100644
--- a/packages/exchange-backoffice-ui/src/Dashborad.tsx
+++ b/packages/exchange-backoffice-ui/src/Dashborad.tsx
@@ -16,7 +16,8 @@ import {
   ChevronDownIcon,
   MagnifyingGlassIcon,
 } from "@heroicons/react/20/solid";
-import { useState } from "preact/hooks";
+import { useRef, useState } from "preact/hooks";
+import { Form } from "./Form.js";
 
 const navigation = [
   { name: "Dashboard", href: "#", icon: HomeIcon, current: true },
@@ -43,9 +44,10 @@ function classNames(...classes: string[]) {
 export function Dashboard({
   children,
 }: {
-  children: ComponentChildren;
+  children?: ComponentChildren;
 }): VNode {
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const logRef = useRef<HTMLPreElement>(null);
 
   return (
     <>
@@ -53,6 +55,7 @@ export function Dashboard({
         <Transition.Root show={sidebarOpen} as={Fragment}>
           <Dialog
             as="div"
+            /* @ts-ignore */
             class="relative z-50 lg:hidden"
             onClose={setSidebarOpen}
           >
@@ -195,9 +198,12 @@ export function Dashboard({
                 alt="Your Company"
               />
             </div>
+            <div class="text-white text-sm">
+              <pre ref={logRef}></pre>
+            </div>
             <nav class="flex flex-1 flex-col">
               <ul role="list" class="flex flex-1 flex-col gap-y-7">
-                <li>
+                {/* <li>
                   <ul role="list" class="-mx-2 space-y-1">
                     {navigation.map((item) => (
                       <li key={item.name}>
@@ -224,8 +230,8 @@ export function Dashboard({
                       </li>
                     ))}
                   </ul>
-                </li>
-                <li>
+                </li> */}
+                {/* <li>
                   <div class="text-xs font-semibold leading-6 text-indigo-200">
                     Your teams
                   </div>
@@ -249,7 +255,7 @@ export function Dashboard({
                       </li>
                     ))}
                   </ul>
-                </li>
+                </li> */}
                 <li class="mt-auto">
                   <a
                     href="#"
@@ -314,7 +320,11 @@ export function Dashboard({
                 />
 
                 {/* Profile dropdown */}
-                <Menu as="div" class="relative">
+                <Menu
+                  as="div"
+                  /* @ts-ignore */
+                  class="relative"
+                >
                   <Menu.Button class="-m-1.5 flex items-center p-1.5">
                     <span class="sr-only">Open user menu</span>
                     <img
@@ -368,7 +378,16 @@ export function Dashboard({
           </div>
 
           <main class="py-10">
-            <div class="px-4 sm:px-6 lg:px-8">{children}</div>
+            <div class="px-4 sm:px-6 lg:px-8">
+              <div class="mx-auto max-w-3xl">
+                <Form
+                  onUpdate={(v) => {
+                    if (!logRef.current) return;
+                    logRef.current.innerHTML = JSON.stringify(v, undefined, 1);
+                  }}
+                />
+              </div>
+            </div>
           </main>
         </div>
       </div>