navigation
This commit is contained in:
Sebastian
parent
c850c40682
commit
4bf1132795
@ -11,7 +11,7 @@ import {
|
|||||||
XMarkIcon,
|
XMarkIcon,
|
||||||
} from "@heroicons/react/24/outline";
|
} from "@heroicons/react/24/outline";
|
||||||
import { ComponentChildren, Fragment, VNode, h } from "preact";
|
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 { NiceForm } from "./NiceForm.js";
|
||||||
import { v1 as form_902_11e_v1 } from "./forms/902_11e.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";
|
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_4e_v1 } from "./forms/902_4e.js";
|
||||||
import { v1 as form_902_5e_v1 } from "./forms/902_5e.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 { 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
|
* references between forms
|
||||||
@ -50,7 +56,7 @@ import { v1 as form_902_9e_v1 } from "./forms/902_9e.js";
|
|||||||
* 902.4
|
* 902.4
|
||||||
*/
|
*/
|
||||||
|
|
||||||
const navigation = [
|
const allForms = [
|
||||||
{
|
{
|
||||||
name: "Identification form (902.1e)",
|
name: "Identification form (902.1e)",
|
||||||
icon: DocumentDuplicateIcon,
|
icon: DocumentDuplicateIcon,
|
||||||
@ -128,6 +134,15 @@ function classNames(...classes: string[]) {
|
|||||||
* @returns
|
* @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:
|
* TO BE FIXED:
|
||||||
*
|
*
|
||||||
@ -168,135 +183,181 @@ export function Dashboard({
|
|||||||
children?: ComponentChildren;
|
children?: ComponentChildren;
|
||||||
}): VNode {
|
}): VNode {
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
const [selectedForm, setSelectedForm] = useState(0);
|
|
||||||
function changeForm(next: number) {
|
|
||||||
setSelectedForm(next);
|
|
||||||
}
|
|
||||||
const logRef = useRef<HTMLPreElement>(null);
|
const logRef = useRef<HTMLPreElement>(null);
|
||||||
const storedValue = {
|
|
||||||
fullName: "loggedIn_user_fullname",
|
|
||||||
when: {
|
|
||||||
t_ms: new Date().getTime(),
|
|
||||||
},
|
|
||||||
};
|
|
||||||
function showFormOnSidebar(v: any) {
|
function showFormOnSidebar(v: any) {
|
||||||
if (!logRef.current) return;
|
if (!logRef.current) return;
|
||||||
logRef.current.innerHTML = JSON.stringify(v, undefined, 1);
|
logRef.current.innerHTML = JSON.stringify(v, undefined, 1);
|
||||||
}
|
}
|
||||||
useEffect(() => {
|
|
||||||
// initial render
|
|
||||||
showFormOnSidebar(storedValue);
|
|
||||||
});
|
|
||||||
|
|
||||||
const GIT_HASH =
|
const Nav = forwardRef(NavigationBar);
|
||||||
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];
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Fragment>
|
||||||
<div>
|
<Nav ref={logRef} isOpen={sidebarOpen} setOpen={setSidebarOpen} />
|
||||||
<Transition.Root show={sidebarOpen} as={Fragment}>
|
<div class="lg:pl-72">
|
||||||
<Dialog
|
<TopBar
|
||||||
as="div"
|
onOpenSidebar={() => {
|
||||||
/* @ts-ignore */
|
setSidebarOpen(true);
|
||||||
class="relative z-50 lg:hidden"
|
}}
|
||||||
onClose={setSidebarOpen}
|
/>
|
||||||
|
<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={setOpen}
|
||||||
|
>
|
||||||
|
<Transition.Child
|
||||||
|
as={Fragment}
|
||||||
|
enter="transition-opacity ease-linear duration-300"
|
||||||
|
enterFrom="opacity-0"
|
||||||
|
enterTo="opacity-100"
|
||||||
|
leave="transition-opacity ease-linear duration-300"
|
||||||
|
leaveFrom="opacity-100"
|
||||||
|
leaveTo="opacity-0"
|
||||||
>
|
>
|
||||||
|
<div class="fixed inset-0 bg-gray-900/80" />
|
||||||
|
</Transition.Child>
|
||||||
|
|
||||||
|
<div class="fixed inset-0 flex">
|
||||||
<Transition.Child
|
<Transition.Child
|
||||||
as={Fragment}
|
as={Fragment}
|
||||||
enter="transition-opacity ease-linear duration-300"
|
enter="transition ease-in-out duration-300 transform"
|
||||||
enterFrom="opacity-0"
|
enterFrom="-translate-x-full"
|
||||||
enterTo="opacity-100"
|
enterTo="translate-x-0"
|
||||||
leave="transition-opacity ease-linear duration-300"
|
leave="transition ease-in-out duration-300 transform"
|
||||||
leaveFrom="opacity-100"
|
leaveFrom="translate-x-0"
|
||||||
leaveTo="opacity-0"
|
leaveTo="-translate-x-full"
|
||||||
>
|
>
|
||||||
<div class="fixed inset-0 bg-gray-900/80" />
|
<Dialog.Panel class="relative mr-16 flex w-full max-w-xs flex-1">
|
||||||
</Transition.Child>
|
<Transition.Child
|
||||||
|
as={Fragment}
|
||||||
<div class="fixed inset-0 flex">
|
enter="ease-in-out duration-300"
|
||||||
<Transition.Child
|
enterFrom="opacity-0"
|
||||||
as={Fragment}
|
enterTo="opacity-100"
|
||||||
enter="transition ease-in-out duration-300 transform"
|
leave="ease-in-out duration-300"
|
||||||
enterFrom="-translate-x-full"
|
leaveFrom="opacity-100"
|
||||||
enterTo="translate-x-0"
|
leaveTo="opacity-0"
|
||||||
leave="transition ease-in-out duration-300 transform"
|
>
|
||||||
leaveFrom="translate-x-0"
|
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
|
||||||
leaveTo="-translate-x-full"
|
<button
|
||||||
>
|
type="button"
|
||||||
<Dialog.Panel class="relative mr-16 flex w-full max-w-xs flex-1">
|
class="-m-2.5 p-2.5"
|
||||||
<Transition.Child
|
onClick={() => setOpen(false)}
|
||||||
as={Fragment}
|
>
|
||||||
enter="ease-in-out duration-300"
|
<span class="sr-only">Close sidebar</span>
|
||||||
enterFrom="opacity-0"
|
<XMarkIcon
|
||||||
enterTo="opacity-100"
|
class="h-6 w-6 text-white"
|
||||||
leave="ease-in-out duration-300"
|
aria-hidden="true"
|
||||||
leaveFrom="opacity-100"
|
|
||||||
leaveTo="opacity-0"
|
|
||||||
>
|
|
||||||
<div class="absolute left-full top-0 flex w-16 justify-center pt-5">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="-m-2.5 p-2.5"
|
|
||||||
onClick={() => setSidebarOpen(false)}
|
|
||||||
>
|
|
||||||
<span class="sr-only">Close sidebar</span>
|
|
||||||
<XMarkIcon
|
|
||||||
class="h-6 w-6 text-white"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</Transition.Child>
|
|
||||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
|
|
||||||
<div class="flex h-16 shrink-0 items-center">
|
|
||||||
<img
|
|
||||||
class="h-8 w-auto"
|
|
||||||
src="https://tailwindui.com/img/logos/mark.svg?color=white"
|
|
||||||
alt="Your Company"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</button>
|
||||||
<nav class="flex flex-1 flex-col">
|
</div>
|
||||||
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
</Transition.Child>
|
||||||
<li>
|
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
|
||||||
<ul role="list" class="-mx-2 space-y-1">
|
<div class="flex h-16 shrink-0 items-center">
|
||||||
{navigation.map((item, idx) => (
|
<img
|
||||||
<li
|
class="h-8 w-auto"
|
||||||
key={item.name}
|
src="https://tailwindui.com/img/logos/mark.svg?color=white"
|
||||||
onClick={(e) => changeForm(idx)}
|
alt="Your Company"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<nav class="flex flex-1 flex-col">
|
||||||
|
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||||
|
<li>
|
||||||
|
<ul role="list" class="-mx-2 space-y-1">
|
||||||
|
{allForms.map((item, idx) => (
|
||||||
|
<li key={item.name}>
|
||||||
|
<a
|
||||||
|
href={`#/form${idx}`}
|
||||||
|
class={classNames(
|
||||||
|
`/${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",
|
||||||
|
)}
|
||||||
>
|
>
|
||||||
<a
|
<item.icon
|
||||||
href="#"
|
|
||||||
class={classNames(
|
class={classNames(
|
||||||
idx === selectedForm
|
`/${idx}` === currentLocation
|
||||||
? "bg-indigo-700 text-white"
|
? "text-white"
|
||||||
: "text-indigo-200 hover:text-white hover:bg-indigo-700",
|
: "text-indigo-200 group-hover:text-white",
|
||||||
"group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold",
|
"h-6 w-6 shrink-0",
|
||||||
)}
|
)}
|
||||||
>
|
aria-hidden="true"
|
||||||
<item.icon
|
/>
|
||||||
class={classNames(
|
{item.name}
|
||||||
idx === selectedForm
|
</a>
|
||||||
? "text-white"
|
</li>
|
||||||
: "text-indigo-200 group-hover:text-white",
|
))}
|
||||||
"h-6 w-6 shrink-0",
|
</ul>
|
||||||
)}
|
</li>
|
||||||
aria-hidden="true"
|
{/* <li>
|
||||||
/>
|
|
||||||
{item.name}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
))}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
{/* <li>
|
|
||||||
<div class="text-xs font-semibold leading-6 text-indigo-200">
|
<div class="text-xs font-semibold leading-6 text-indigo-200">
|
||||||
Your teams
|
Your teams
|
||||||
</div>
|
</div>
|
||||||
@ -321,67 +382,67 @@ export function Dashboard({
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</li> */}
|
</li> */}
|
||||||
<li class="mt-auto">
|
<li class="mt-auto">
|
||||||
<a
|
|
||||||
href="#"
|
|
||||||
class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
|
||||||
>
|
|
||||||
<Cog6ToothIcon
|
|
||||||
class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
Settings
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</Dialog.Panel>
|
|
||||||
</Transition.Child>
|
|
||||||
</div>
|
|
||||||
</Dialog>
|
|
||||||
</Transition.Root>
|
|
||||||
|
|
||||||
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
|
|
||||||
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
|
|
||||||
<div class="flex h-16 shrink-0 items-center">
|
|
||||||
<img
|
|
||||||
class="h-8 w-auto"
|
|
||||||
src="https://tailwindui.com/img/logos/mark.svg?color=white"
|
|
||||||
alt="Your Company"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<nav class="flex flex-1 flex-col">
|
|
||||||
<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)}>
|
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class={classNames(
|
class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||||
idx === selectedForm
|
|
||||||
? "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",
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<item.icon
|
<Cog6ToothIcon
|
||||||
class={classNames(
|
class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
|
||||||
idx === selectedForm
|
|
||||||
? "text-white"
|
|
||||||
: "text-indigo-200 group-hover:text-white",
|
|
||||||
"h-6 w-6 shrink-0",
|
|
||||||
)}
|
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
{item.name}
|
Settings
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
))}
|
</ul>
|
||||||
</ul>
|
</nav>
|
||||||
</li>
|
</div>
|
||||||
{/* <li>
|
</Dialog.Panel>
|
||||||
|
</Transition.Child>
|
||||||
|
</div>
|
||||||
|
</Dialog>
|
||||||
|
</Transition.Root>
|
||||||
|
|
||||||
|
<div class="hidden lg:fixed lg:inset-y-0 lg:z-50 lg:flex lg:w-72 lg:flex-col">
|
||||||
|
<div class="flex grow flex-col gap-y-5 overflow-y-auto bg-indigo-600 px-6 pb-4">
|
||||||
|
<div class="flex h-16 shrink-0 items-center">
|
||||||
|
<img
|
||||||
|
class="h-8 w-auto"
|
||||||
|
src="https://tailwindui.com/img/logos/mark.svg?color=white"
|
||||||
|
alt="Your Company"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<nav class="flex flex-1 flex-col">
|
||||||
|
<ul role="list" class="flex flex-1 flex-col gap-y-7">
|
||||||
|
<li>
|
||||||
|
<ul role="list" class="-mx-2 space-y-1">
|
||||||
|
{allForms.map((item, idx) => (
|
||||||
|
<li key={item.name}>
|
||||||
|
<a
|
||||||
|
href={`#/form${idx}`}
|
||||||
|
class={classNames(
|
||||||
|
`/${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",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<item.icon
|
||||||
|
class={classNames(
|
||||||
|
`/${idx}` === currentLocation
|
||||||
|
? "text-white"
|
||||||
|
: "text-indigo-200 group-hover:text-white",
|
||||||
|
"h-6 w-6 shrink-0",
|
||||||
|
)}
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
{/* <li>
|
||||||
<div class="text-xs font-semibold leading-6 text-indigo-200">
|
<div class="text-xs font-semibold leading-6 text-indigo-200">
|
||||||
Your teams
|
Your teams
|
||||||
</div>
|
</div>
|
||||||
@ -406,154 +467,172 @@ export function Dashboard({
|
|||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</li> */}
|
</li> */}
|
||||||
<li class="mt-auto">
|
<li class="mt-auto">
|
||||||
<a
|
<a
|
||||||
href="#"
|
href="#"
|
||||||
class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
class="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-indigo-200 hover:bg-indigo-700 hover:text-white"
|
||||||
>
|
|
||||||
<Cog6ToothIcon
|
|
||||||
class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
Settings
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
<div class="text-white text-sm">
|
|
||||||
<pre ref={logRef}></pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="lg:pl-72">
|
|
||||||
<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)}
|
|
||||||
>
|
|
||||||
<span class="sr-only">Open sidebar</span>
|
|
||||||
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
|
|
||||||
</button>
|
|
||||||
|
|
||||||
{/* Separator */}
|
|
||||||
<div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true" />
|
|
||||||
|
|
||||||
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
|
|
||||||
<form class="relative flex flex-1" action="#" method="GET">
|
|
||||||
<label htmlFor="search-field" class="sr-only">
|
|
||||||
Search
|
|
||||||
</label>
|
|
||||||
<MagnifyingGlassIcon
|
|
||||||
class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
<input
|
|
||||||
id="search-field"
|
|
||||||
class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
|
|
||||||
placeholder="Search..."
|
|
||||||
type="search"
|
|
||||||
name="search"
|
|
||||||
/>
|
|
||||||
</form>
|
|
||||||
<div class="flex items-center gap-x-4 lg:gap-x-6">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"
|
|
||||||
>
|
>
|
||||||
<span class="sr-only">View notifications</span>
|
<Cog6ToothIcon
|
||||||
<BellIcon class="h-6 w-6" aria-hidden="true" />
|
class="h-6 w-6 shrink-0 text-indigo-200 group-hover:text-white"
|
||||||
</button>
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
{/* Separator */}
|
Settings
|
||||||
<div
|
</a>
|
||||||
class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10"
|
</li>
|
||||||
aria-hidden="true"
|
</ul>
|
||||||
/>
|
</nav>
|
||||||
|
<div class="text-white text-sm">
|
||||||
{/* Profile dropdown */}
|
<pre ref={logRef}></pre>
|
||||||
<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
|
|
||||||
class="h-8 w-8 rounded-full bg-gray-50"
|
|
||||||
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
|
||||||
alt=""
|
|
||||||
/>
|
|
||||||
<span class="hidden lg:flex lg:items-center">
|
|
||||||
<span
|
|
||||||
class="ml-4 text-sm font-semibold leading-6 text-gray-900"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
Tom Cook
|
|
||||||
</span>
|
|
||||||
<ChevronDownIcon
|
|
||||||
class="ml-2 h-5 w-5 text-gray-400"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
</Menu.Button>
|
|
||||||
<Transition
|
|
||||||
as={Fragment}
|
|
||||||
enter="transition ease-out duration-100"
|
|
||||||
enterFrom="transform opacity-0 scale-95"
|
|
||||||
enterTo="transform opacity-100 scale-100"
|
|
||||||
leave="transition ease-in duration-75"
|
|
||||||
leaveFrom="transform opacity-100 scale-100"
|
|
||||||
leaveTo="transform opacity-0 scale-95"
|
|
||||||
>
|
|
||||||
<Menu.Items class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
|
|
||||||
{userNavigation.map((item) => (
|
|
||||||
<Menu.Item key={item.name}>
|
|
||||||
{({ active }: { active: boolean }) => (
|
|
||||||
<a
|
|
||||||
href={item.href}
|
|
||||||
class={classNames(
|
|
||||||
active ? "bg-gray-50" : "",
|
|
||||||
"block px-3 py-1 text-sm leading-6 text-gray-900",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{item.name}
|
|
||||||
</a>
|
|
||||||
)}
|
|
||||||
</Menu.Item>
|
|
||||||
))}
|
|
||||||
</Menu.Items>
|
|
||||||
</Transition>
|
|
||||||
</Menu>
|
|
||||||
</div>
|
|
||||||
</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>
|
|
||||||
|
|
||||||
<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">
|
|
||||||
<p class="text-center text-xs leading-5 text-gray-500">
|
|
||||||
Copyright © 2014—2023 Taler Systems SA.
|
|
||||||
{versionText}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</>
|
</Fragment>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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={onOpenSidebar}
|
||||||
|
>
|
||||||
|
<span class="sr-only">Open sidebar</span>
|
||||||
|
<Bars3Icon class="h-6 w-6" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Separator */}
|
||||||
|
<div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true" />
|
||||||
|
|
||||||
|
<div class="flex flex-1 gap-x-4 self-stretch lg:gap-x-6">
|
||||||
|
<form class="relative flex flex-1" action="#" method="GET">
|
||||||
|
<label htmlFor="search-field" class="sr-only">
|
||||||
|
Search
|
||||||
|
</label>
|
||||||
|
<MagnifyingGlassIcon
|
||||||
|
class="pointer-events-none absolute inset-y-0 left-0 h-full w-5 text-gray-400"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
id="search-field"
|
||||||
|
class="block h-full w-full border-0 py-0 pl-8 pr-0 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm"
|
||||||
|
placeholder="Search..."
|
||||||
|
type="search"
|
||||||
|
name="search"
|
||||||
|
/>
|
||||||
|
</form>
|
||||||
|
<div class="flex items-center gap-x-4 lg:gap-x-6">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="-m-2.5 p-2.5 text-gray-400 hover:text-gray-500"
|
||||||
|
>
|
||||||
|
<span class="sr-only">View notifications</span>
|
||||||
|
<BellIcon class="h-6 w-6" aria-hidden="true" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Separator */}
|
||||||
|
<div
|
||||||
|
class="hidden lg:block lg:h-6 lg:w-px lg:bg-gray-900/10"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Profile dropdown */}
|
||||||
|
<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
|
||||||
|
class="h-8 w-8 rounded-full bg-gray-50"
|
||||||
|
src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
<span class="hidden lg:flex lg:items-center">
|
||||||
|
<span
|
||||||
|
class="ml-4 text-sm font-semibold leading-6 text-gray-900"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
Tom Cook
|
||||||
|
</span>
|
||||||
|
<ChevronDownIcon
|
||||||
|
class="ml-2 h-5 w-5 text-gray-400"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</Menu.Button>
|
||||||
|
<Transition
|
||||||
|
as={Fragment}
|
||||||
|
enter="transition ease-out duration-100"
|
||||||
|
enterFrom="transform opacity-0 scale-95"
|
||||||
|
enterTo="transform opacity-100 scale-100"
|
||||||
|
leave="transition ease-in duration-75"
|
||||||
|
leaveFrom="transform opacity-100 scale-100"
|
||||||
|
leaveTo="transform opacity-0 scale-95"
|
||||||
|
>
|
||||||
|
<Menu.Items class="absolute right-0 z-10 mt-2.5 w-32 origin-top-right rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
|
||||||
|
{userNavigation.map((item) => (
|
||||||
|
<Menu.Item key={item.name}>
|
||||||
|
{({ active }: { active: boolean }) => (
|
||||||
|
<a
|
||||||
|
href={item.href}
|
||||||
|
class={classNames(
|
||||||
|
active ? "bg-gray-50" : "",
|
||||||
|
"block px-3 py-1 text-sm leading-6 text-gray-900",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</Menu.Item>
|
||||||
|
))}
|
||||||
|
</Menu.Items>
|
||||||
|
</Transition>
|
||||||
|
</Menu>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
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">
|
||||||
|
<p class="text-center text-xs leading-5 text-gray-500">
|
||||||
|
Copyright © 2014—2023 Taler Systems SA.
|
||||||
|
{versionText}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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