navigation
This commit is contained in:
Sebastian
parent
c850c40682
commit
4bf1132795
@ -11,7 +11,7 @@ import {
|
||||
XMarkIcon,
|
||||
} from "@heroicons/react/24/outline";
|
||||
import { ComponentChildren, Fragment, VNode, h } from "preact";
|
||||
import { useEffect, useRef, useState } from "preact/hooks";
|
||||
import { useEffect, useReducer, useRef, useState } from "preact/hooks";
|
||||
import { NiceForm } from "./NiceForm.js";
|
||||
import { v1 as form_902_11e_v1 } from "./forms/902_11e.js";
|
||||
import { v1 as form_902_12e_v1 } from "./forms/902_12e.js";
|
||||
@ -21,6 +21,12 @@ import { v1 as form_902_1e_v1 } from "./forms/902_1e.js";
|
||||
import { v1 as form_902_4e_v1 } from "./forms/902_4e.js";
|
||||
import { v1 as form_902_5e_v1 } from "./forms/902_5e.js";
|
||||
import { v1 as form_902_9e_v1 } from "./forms/902_9e.js";
|
||||
import { FlexibleForm } from "./forms/index.js";
|
||||
import { forwardRef } from "preact/compat";
|
||||
import { ForwardedRef } from "preact/compat";
|
||||
import { createHashHistory } from "history";
|
||||
|
||||
const history = createHashHistory();
|
||||
|
||||
/**
|
||||
* references between forms
|
||||
@ -50,7 +56,7 @@ import { v1 as form_902_9e_v1 } from "./forms/902_9e.js";
|
||||
* 902.4
|
||||
*/
|
||||
|
||||
const navigation = [
|
||||
const allForms = [
|
||||
{
|
||||
name: "Identification form (902.1e)",
|
||||
icon: DocumentDuplicateIcon,
|
||||
@ -128,6 +134,15 @@ function classNames(...classes: string[]) {
|
||||
* @returns
|
||||
*/
|
||||
|
||||
const GIT_HASH = typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
|
||||
const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
|
||||
|
||||
const versionText = VERSION
|
||||
? GIT_HASH
|
||||
? `Version ${VERSION} (${GIT_HASH.substring(0, 8)})`
|
||||
: VERSION
|
||||
: "";
|
||||
|
||||
/**
|
||||
* TO BE FIXED:
|
||||
*
|
||||
@ -168,46 +183,95 @@ export function Dashboard({
|
||||
children?: ComponentChildren;
|
||||
}): VNode {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||
const [selectedForm, setSelectedForm] = useState(0);
|
||||
function changeForm(next: number) {
|
||||
setSelectedForm(next);
|
||||
}
|
||||
|
||||
const logRef = useRef<HTMLPreElement>(null);
|
||||
const storedValue = {
|
||||
fullName: "loggedIn_user_fullname",
|
||||
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 GIT_HASH =
|
||||
typeof __GIT_HASH__ !== "undefined" ? __GIT_HASH__ : undefined;
|
||||
const VERSION = typeof __VERSION__ !== "undefined" ? __VERSION__ : undefined;
|
||||
|
||||
const versionText = VERSION
|
||||
? GIT_HASH
|
||||
? `Version ${VERSION} (${GIT_HASH.substring(0, 8)})`
|
||||
: VERSION
|
||||
: "";
|
||||
|
||||
const showingFrom = navigation[selectedForm];
|
||||
const Nav = forwardRef(NavigationBar);
|
||||
return (
|
||||
<>
|
||||
<div>
|
||||
<Transition.Root show={sidebarOpen} as={Fragment}>
|
||||
<Fragment>
|
||||
<Nav ref={logRef} isOpen={sidebarOpen} setOpen={setSidebarOpen} />
|
||||
<div class="lg:pl-72">
|
||||
<TopBar
|
||||
onOpenSidebar={() => {
|
||||
setSidebarOpen(true);
|
||||
}}
|
||||
/>
|
||||
<main class="py-10 px-4 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-3xl">
|
||||
<Route
|
||||
onUpdate={(v) => {
|
||||
showFormOnSidebar(v);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function Route({ onUpdate }: { onUpdate: (v: any) => void }) {
|
||||
const [page, setPage] = useState<undefined | number>();
|
||||
function doSync(path: string) {
|
||||
try {
|
||||
if (path.startsWith("/form")) {
|
||||
const formNumber = path.substring("/form".length);
|
||||
const num = Number.parseInt(formNumber, 10);
|
||||
if (!Number.isNaN(num) && num >= 0 && num < allForms.length) {
|
||||
setPage(num);
|
||||
} else {
|
||||
setPage(undefined);
|
||||
}
|
||||
} else {
|
||||
setPage(undefined);
|
||||
}
|
||||
} catch (e) {
|
||||
setPage(undefined);
|
||||
}
|
||||
}
|
||||
useEffect(() => {
|
||||
doSync(history.location.pathname);
|
||||
return history.listen((location, action) => {
|
||||
doSync(location.pathname);
|
||||
});
|
||||
}, []);
|
||||
if (page !== undefined) {
|
||||
return <Content onUpdate={onUpdate} selectedForm={page} />;
|
||||
}
|
||||
return <div>not found</div>;
|
||||
}
|
||||
|
||||
function useCurrentLocation() {
|
||||
const [currentLocation, setCurrentLocation] = useState(
|
||||
history.location.pathname,
|
||||
);
|
||||
useEffect(() => {
|
||||
return history.listen((location) => {
|
||||
setCurrentLocation(location.pathname);
|
||||
});
|
||||
});
|
||||
return currentLocation;
|
||||
}
|
||||
|
||||
function NavigationBar(
|
||||
{ isOpen, setOpen }: { isOpen: boolean; setOpen: (v: boolean) => void },
|
||||
logRef: ForwardedRef<HTMLPreElement>,
|
||||
) {
|
||||
const currentLocation = useCurrentLocation();
|
||||
return (
|
||||
<Fragment>
|
||||
<Transition.Root show={isOpen} as={Fragment}>
|
||||
<Dialog
|
||||
as="div"
|
||||
/* @ts-ignore */
|
||||
class="relative z-50 lg:hidden"
|
||||
onClose={setSidebarOpen}
|
||||
onClose={setOpen}
|
||||
>
|
||||
<Transition.Child
|
||||
as={Fragment}
|
||||
@ -245,7 +309,7 @@ export function Dashboard({
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5"
|
||||
onClick={() => setSidebarOpen(false)}
|
||||
onClick={() => setOpen(false)}
|
||||
>
|
||||
<span class="sr-only">Close sidebar</span>
|
||||
<XMarkIcon
|
||||
@ -267,15 +331,12 @@ export function Dashboard({
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
{navigation.map((item, idx) => (
|
||||
<li
|
||||
key={item.name}
|
||||
onClick={(e) => changeForm(idx)}
|
||||
>
|
||||
{allForms.map((item, idx) => (
|
||||
<li key={item.name}>
|
||||
<a
|
||||
href="#"
|
||||
href={`#/form${idx}`}
|
||||
class={classNames(
|
||||
idx === selectedForm
|
||||
`/${idx}` === currentLocation
|
||||
? "bg-indigo-700 text-white"
|
||||
: "text-indigo-200 hover:text-white hover:bg-indigo-700",
|
||||
"group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold",
|
||||
@ -283,7 +344,7 @@ export function Dashboard({
|
||||
>
|
||||
<item.icon
|
||||
class={classNames(
|
||||
idx === selectedForm
|
||||
`/${idx}` === currentLocation
|
||||
? "text-white"
|
||||
: "text-indigo-200 group-hover:text-white",
|
||||
"h-6 w-6 shrink-0",
|
||||
@ -355,12 +416,12 @@ export function Dashboard({
|
||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||
<li>
|
||||
<ul role="list" class="-mx-2 space-y-1">
|
||||
{navigation.map((item, idx) => (
|
||||
<li key={item.name} onClick={(e) => changeForm(idx)}>
|
||||
{allForms.map((item, idx) => (
|
||||
<li key={item.name}>
|
||||
<a
|
||||
href="#"
|
||||
href={`#/form${idx}`}
|
||||
class={classNames(
|
||||
idx === selectedForm
|
||||
`/${idx}` === currentLocation
|
||||
? "bg-indigo-700 text-white"
|
||||
: "text-indigo-200 hover:text-white hover:bg-indigo-700",
|
||||
"group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold",
|
||||
@ -368,7 +429,7 @@ export function Dashboard({
|
||||
>
|
||||
<item.icon
|
||||
class={classNames(
|
||||
idx === selectedForm
|
||||
`/${idx}` === currentLocation
|
||||
? "text-white"
|
||||
: "text-indigo-200 group-hover:text-white",
|
||||
"h-6 w-6 shrink-0",
|
||||
@ -425,13 +486,42 @@ export function Dashboard({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
<div class="lg:pl-72">
|
||||
function Content({
|
||||
onUpdate,
|
||||
selectedForm,
|
||||
}: {
|
||||
onUpdate: (v: any) => void;
|
||||
selectedForm: number;
|
||||
}) {
|
||||
const showingFrom = allForms[selectedForm].impl;
|
||||
const storedValue = {
|
||||
fullName: "loggedIn_user_fullname",
|
||||
when: {
|
||||
t_ms: new Date().getTime(),
|
||||
},
|
||||
};
|
||||
useEffect(() => {
|
||||
// initial render
|
||||
onUpdate(storedValue);
|
||||
});
|
||||
return (
|
||||
<Fragment>
|
||||
<NiceForm initial={storedValue} form={showingFrom} onUpdate={onUpdate} />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
function TopBar({ onOpenSidebar }: { onOpenSidebar: () => void }) {
|
||||
return (
|
||||
<div class="sticky top-0 z-40 flex h-16 shrink-0 items-center gap-x-4 border-b border-gray-200 bg-white px-4 shadow-sm sm:gap-x-6 sm:px-6 lg:px-8">
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 p-2.5 text-gray-700 lg:hidden"
|
||||
onClick={() => setSidebarOpen(true)}
|
||||
onClick={onOpenSidebar}
|
||||
>
|
||||
<span class="sr-only">Open sidebar</span>
|
||||
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
|
||||
@ -529,19 +619,11 @@ export function Dashboard({
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
<main class="py-10">
|
||||
<div class="px-4 sm:px-6 lg:px-8">
|
||||
<div class="mx-auto max-w-3xl">
|
||||
<NiceForm
|
||||
initial={storedValue}
|
||||
form={showingFrom.impl as any}
|
||||
onUpdate={showFormOnSidebar}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
function Footer() {
|
||||
return (
|
||||
<footer class="bg-white">
|
||||
<div class="mx-auto px-4 py-2 md:flex md:items-center md:justify-between lg:px-8">
|
||||
<div class="mt-8 md:order-1 md:mt-0">
|
||||
@ -552,8 +634,5 @@ export function Dashboard({
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,174 +0,0 @@
|
||||
import { Dialog } from "@headlessui/react";
|
||||
import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
|
||||
import { h } from "preact";
|
||||
import { useState } from "preact/hooks";
|
||||
|
||||
const navigation = [
|
||||
{ name: "Product", href: "#" },
|
||||
{ name: "Features", href: "#" },
|
||||
{ name: "Marketplace", href: "#" },
|
||||
{ name: "Company", href: "#" },
|
||||
];
|
||||
|
||||
export function HeroSections() {
|
||||
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<div class="bg-white">
|
||||
<header class="absolute inset-x-0 top-0 z-50">
|
||||
<nav
|
||||
class="flex items-center justify-between p-6 lg:px-8"
|
||||
aria-label="Global"
|
||||
>
|
||||
<div class="flex lg:flex-1">
|
||||
<a href="#" class="-m-1.5 p-1.5">
|
||||
<span class="sr-only">Your Company</span>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex lg:hidden">
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
|
||||
onClick={() => setMobileMenuOpen(true)}
|
||||
>
|
||||
<span class="sr-only">Open main menu</span>
|
||||
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:gap-x-12">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
class="text-sm font-semibold leading-6 text-gray-900"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="hidden lg:flex lg:flex-1 lg:justify-end">
|
||||
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">
|
||||
Log in <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
<Dialog
|
||||
as="div"
|
||||
/* @ts-ignore */
|
||||
class="lg:hidden"
|
||||
open={mobileMenuOpen}
|
||||
onClose={setMobileMenuOpen}
|
||||
>
|
||||
<div class="fixed inset-0 z-50" />
|
||||
<Dialog.Panel class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
|
||||
<div class="flex items-center justify-between">
|
||||
<a href="#" class="-m-1.5 p-1.5">
|
||||
<span class="sr-only">Your Company</span>
|
||||
<img
|
||||
class="h-8 w-auto"
|
||||
src="https://tailwindui.com/img/logos/mark.svg?color=indigo&shade=600"
|
||||
alt=""
|
||||
/>
|
||||
</a>
|
||||
<button
|
||||
type="button"
|
||||
class="-m-2.5 rounded-md p-2.5 text-gray-700"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
>
|
||||
<span class="sr-only">Close menu</span>
|
||||
<XMarkIcon class="h-6 w-6" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-6 flow-root">
|
||||
<div class="-my-6 divide-y divide-gray-500/10">
|
||||
<div class="space-y-2 py-6">
|
||||
{navigation.map((item) => (
|
||||
<a
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||
>
|
||||
{item.name}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div class="py-6">
|
||||
<a
|
||||
href="#"
|
||||
class="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
|
||||
>
|
||||
Log in
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog.Panel>
|
||||
</Dialog>
|
||||
</header>
|
||||
|
||||
<div class="relative isolate px-6 pt-14 lg:px-8">
|
||||
<div
|
||||
class="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
class="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
|
||||
style={{
|
||||
clipPath:
|
||||
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div class="mx-auto max-w-2xl py-32 sm:py-48 lg:py-56">
|
||||
<div class="hidden sm:mb-8 sm:flex sm:justify-center">
|
||||
<div class="relative rounded-full px-3 py-1 text-sm leading-6 text-gray-600 ring-1 ring-gray-900/10 hover:ring-gray-900/20">
|
||||
Announcing our next round of funding.{" "}
|
||||
<a href="#" class="font-semibold text-indigo-600">
|
||||
<span class="absolute inset-0" aria-hidden="true" />
|
||||
Read more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-center">
|
||||
<h1 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
|
||||
Data to enrich your online business
|
||||
</h1>
|
||||
<p class="mt-6 text-lg leading-8 text-gray-600">
|
||||
Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
|
||||
lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
|
||||
fugiat aliqua.
|
||||
</p>
|
||||
<div class="mt-10 flex items-center justify-center gap-x-6">
|
||||
<a
|
||||
href="#"
|
||||
class="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
|
||||
>
|
||||
Get started
|
||||
</a>
|
||||
<a href="#" class="text-sm font-semibold leading-6 text-gray-900">
|
||||
Learn more <span aria-hidden="true">→</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<div
|
||||
class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-[#ff80b5] to-[#9089fc] opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
|
||||
style={{
|
||||
clipPath:
|
||||
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user