[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]
[taler-wallet-core] branch master updated: navigation
|
From: |
gnunet |
|
Subject: |
[taler-wallet-core] branch master updated: navigation |
|
Date: |
Wed, 17 May 2023 19:58:59 +0200 |
This is an automated email from the git hooks/post-receive script.
sebasjm pushed a commit to branch master
in repository wallet-core.
The following commit(s) were added to refs/heads/master by this push:
new 4bf113279 navigation
4bf113279 is described below
commit 4bf113279530ae1fe2a0f748717e7aff320681ea
Author: Sebastian <sebasjm@gmail.com>
AuthorDate: Wed May 17 14:58:54 2023 -0300
navigation
---
packages/exchange-backoffice-ui/src/Dashborad.tsx | 687 ++++++++++++---------
.../exchange-backoffice-ui/src/HeroSections.tsx | 174 ------
2 files changed, 383 insertions(+), 478 deletions(-)
diff --git a/packages/exchange-backoffice-ui/src/Dashborad.tsx
b/packages/exchange-backoffice-ui/src/Dashborad.tsx
index 4fdb7415a..142e1de16 100644
--- a/packages/exchange-backoffice-ui/src/Dashborad.tsx
+++ b/packages/exchange-backoffice-ui/src/Dashborad.tsx
@@ -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,135 +183,181 @@ 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 Nav = forwardRef(NavigationBar);
+ return (
+ <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>
- const versionText = VERSION
- ? GIT_HASH
- ? `Version ${VERSION} (${GIT_HASH.substring(0, 8)})`
- : VERSION
- : "";
+ <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>;
+}
- const showingFrom = navigation[selectedForm];
+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 (
- <>
- <div>
- <Transition.Root show={sidebarOpen} as={Fragment}>
- <Dialog
- as="div"
- /* @ts-ignore */
- class="relative z-50 lg:hidden"
- onClose={setSidebarOpen}
+ <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
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"
+ enter="transition ease-in-out duration-300 transform"
+ enterFrom="-translate-x-full"
+ enterTo="translate-x-0"
+ leave="transition ease-in-out duration-300 transform"
+ leaveFrom="translate-x-0"
+ leaveTo="-translate-x-full"
>
- <div class="fixed inset-0 bg-gray-900/80" />
- </Transition.Child>
-
- <div class="fixed inset-0 flex">
- <Transition.Child
- as={Fragment}
- enter="transition ease-in-out duration-300 transform"
- enterFrom="-translate-x-full"
- enterTo="translate-x-0"
- leave="transition ease-in-out duration-300 transform"
- leaveFrom="translate-x-0"
- leaveTo="-translate-x-full"
- >
- <Dialog.Panel class="relative mr-16 flex w-full max-w-xs
flex-1">
- <Transition.Child
- as={Fragment}
- enter="ease-in-out duration-300"
- enterFrom="opacity-0"
- enterTo="opacity-100"
- leave="ease-in-out duration-300"
- 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"
+ <Dialog.Panel class="relative mr-16 flex w-full max-w-xs flex-1">
+ <Transition.Child
+ as={Fragment}
+ enter="ease-in-out duration-300"
+ enterFrom="opacity-0"
+ enterTo="opacity-100"
+ leave="ease-in-out duration-300"
+ 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={() => setOpen(false)}
+ >
+ <span class="sr-only">Close sidebar</span>
+ <XMarkIcon
+ class="h-6 w-6 text-white"
+ aria-hidden="true"
/>
- </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)}
+ </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>
+ <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
- href="#"
+ <item.icon
class={classNames(
- 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",
+ `/${idx}` === currentLocation
+ ? "text-white"
+ : "text-indigo-200
group-hover:text-white",
+ "h-6 w-6 shrink-0",
)}
- >
- <item.icon
- class={classNames(
- idx === selectedForm
- ? "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>
+ aria-hidden="true"
+ />
+ {item.name}
+ </a>
+ </li>
+ ))}
+ </ul>
+ </li>
+ {/* <li>
<div class="text-xs font-semibold leading-6
text-indigo-200">
Your teams
</div>
@@ -321,67 +382,67 @@ export function Dashboard({
))}
</ul>
</li> */}
- <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)}>
+ <li class="mt-auto">
<a
href="#"
- class={classNames(
- 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",
- )}
+ 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"
>
- <item.icon
- class={classNames(
- idx === selectedForm
- ? "text-white"
- : "text-indigo-200 group-hover:text-white",
- "h-6 w-6 shrink-0",
- )}
+ <Cog6ToothIcon
+ class="h-6 w-6 shrink-0 text-indigo-200
group-hover:text-white"
aria-hidden="true"
/>
- {item.name}
+ Settings
</a>
</li>
- ))}
- </ul>
- </li>
- {/* <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">
+ {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">
Your teams
</div>
@@ -406,154 +467,172 @@ export function Dashboard({
))}
</ul>
</li> */}
- <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 class="text-white text-sm">
- <pre ref={logRef}></pre>
- </div>
+ <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 class="text-white text-sm">
+ <pre ref={logRef}></pre>
</div>
</div>
+ </div>
+ </Fragment>
+ );
+}
- <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>
+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>
+ );
+}
- {/* Separator */}
- <div class="h-6 w-px bg-gray-900/10 lg:hidden" aria-hidden="true"
/>
+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>
- <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"
+ {/* 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"
- />
- <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"
+ Tom Cook
+ </span>
+ <ChevronDownIcon
+ class="ml-2 h-5 w-5 text-gray-400"
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"
+ </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",
+ )}
>
- 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>
-
- <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>
+ {item.name}
+ </a>
+ )}
+ </Menu.Item>
+ ))}
+ </Menu.Items>
+ </Transition>
+ </Menu>
+ </div>
+ </div>
+ </div>
+ );
+}
- <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>
+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>
);
}
diff --git a/packages/exchange-backoffice-ui/src/HeroSections.tsx
b/packages/exchange-backoffice-ui/src/HeroSections.tsx
deleted file mode 100644
index bdfaa49d4..000000000
--- a/packages/exchange-backoffice-ui/src/HeroSections.tsx
+++ /dev/null
@@ -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>
- );
-}
--
To stop receiving notification emails like this one, please contact
gnunet@gnunet.org.
| [Prev in Thread] |
Current Thread |
[Next in Thread] |
- [taler-wallet-core] branch master updated: navigation,
gnunet <=