diff options
Diffstat (limited to 'packages/exchange-backoffice-ui/src/Dashborad.tsx')
| -rw-r--r-- | packages/exchange-backoffice-ui/src/Dashborad.tsx | 373 |
1 files changed, 373 insertions, 0 deletions
diff --git a/packages/exchange-backoffice-ui/src/Dashborad.tsx b/packages/exchange-backoffice-ui/src/Dashborad.tsx new file mode 100644 index 000000000..8e137d69d --- /dev/null +++ b/packages/exchange-backoffice-ui/src/Dashborad.tsx @@ -0,0 +1,373 @@ +import { Fragment, 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 { useState } from "preact/hooks"; + +const navigation = [ + { name: "Dashboard", href: "#", icon: HomeIcon, current: true }, + { name: "Team", href: "#", icon: UsersIcon, current: false }, + { name: "Projects", href: "#", icon: FolderIcon, current: false }, + { name: "Calendar", href: "#", icon: CalendarIcon, current: false }, + { name: "Documents", href: "#", icon: DocumentDuplicateIcon, current: false }, + { name: "Reports", href: "#", icon: ChartPieIcon, current: false }, +]; +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(" "); +} + +export function Dashboard() { + const [sidebarOpen, setSidebarOpen] = useState(false); + + return ( + <> + <div> + <Transition.Root show={sidebarOpen} as={Fragment}> + <Dialog + as="div" + class="relative z-50 lg:hidden" + onClose={setSidebarOpen} + > + <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 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" + /> + </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) => ( + <li key={item.name}> + <a + href={item.href} + class={classNames( + item.current + ? "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( + item.current + ? "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> + <ul role="list" class="-mx-2 mt-2 space-y-1"> + {teams.map((team) => ( + <li key={team.name}> + <a + href={team.href} + class={classNames( + team.current + ? "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", + )} + > + <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"> + {team.initial} + </span> + <span class="truncate">{team.name}</span> + </a> + </li> + ))} + </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) => ( + <li key={item.name}> + <a + href={item.href} + class={classNames( + item.current + ? "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( + item.current + ? "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> + <ul role="list" class="-mx-2 mt-2 space-y-1"> + {teams.map((team) => ( + <li key={team.name}> + <a + href={team.href} + class={classNames( + team.current + ? "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", + )} + > + <span class="flex h-6 w-6 shrink-0 items-center justify-center rounded-lg border border-indigo-400 bg-indigo-500 text-[0.625rem] font-medium text-white"> + {team.initial} + </span> + <span class="truncate">{team.name}</span> + </a> + </li> + ))} + </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> + </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> + <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" 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> + + <main class="py-10"> + <div class="px-4 sm:px-6 lg:px-8">{/* Your content */}</div> + </main> + </div> + </div> + </> + ); +} |