import { ComponentChildren, Fragment, VNode, h } from "preact"; import { Dialog, Menu, Transition } from "@headlessui/react"; import { Bars3Icon, BellIcon, CalendarIcon, ChartPieIcon, Cog6ToothIcon, DocumentDuplicateIcon, FolderIcon, HomeIcon, UsersIcon, XMarkIcon, } from "@heroicons/react/24/outline"; import { ChevronDownIcon, MagnifyingGlassIcon, } from "@heroicons/react/20/solid"; import { useEffect, useRef, useState } from "preact/hooks"; import { NiceForm } from "./NiceForm.js"; import { v1 as form_902_1e_v1 } from "./forms/902_1e.js"; import { v1 as form_902_11e_v1 } from "./forms/902_11e.js"; const navigation = [ { name: "Identification form (902.1e)", icon: DocumentDuplicateIcon, impl: form_902_1e_v1, }, { name: "Operational legal entity or partnership (902.11e)", icon: DocumentDuplicateIcon, impl: form_902_11e_v1, }, ]; const teams = [ { id: 1, name: "Heroicons", href: "#", initial: "H", current: false }, { id: 2, name: "Tailwind Labs", href: "#", initial: "T", current: false }, { id: 3, name: "Workcation", href: "#", initial: "W", current: false }, ]; const userNavigation = [ { name: "Your profile", href: "#" }, { name: "Sign out", href: "#" }, ]; function classNames(...classes: string[]) { return classes.filter(Boolean).join(" "); } /** * mapping route to view * not found (error page) * nested, index element, relative routes * link interception * form POST interception, call action * fromData => Object.fromEntries * segments in the URL * navigationState: idle, submitting, loading * form GET interception: does a navigateTo * form GET Sync: * 1.- back after submit: useEffect to sync URL to form * 2.- refresh after submit: input default value * useSubmit for form submission onChange, history replace * * post form without redirect * * * @param param0 * @returns */ export function Dashboard({ children, }: { children?: ComponentChildren; }): VNode { const [sidebarOpen, setSidebarOpen] = useState(false); const [selectedForm, setSelectedForm] = useState(1); const logRef = useRef(null); const storedValue = { when: { t_ms: new Date().getTime(), }, }; function showFormOnSidebar(v: any) { if (!logRef.current) return; logRef.current.innerHTML = JSON.stringify(v, undefined, 1); } useEffect(() => { // initial render showFormOnSidebar(storedValue); }); const showingFrom = navigation[selectedForm]; console.log(showingFrom); return ( <>
Your Company
{/* Separator */}
); }