diff options
| author | 2023-05-03 01:22:45 +0800 | |
|---|---|---|
| committer | 2023-05-03 01:22:45 +0800 | |
| commit | e76a5f847e78fee4e62f6eb37d468557a1504c55 (patch) | |
| tree | 4bcdeeeafb5bdc5945d855a22e6495926b5fbdd6 /docs/components/pages/pack-home/PackDropdown.tsx | |
| parent | 4ddbf86780b7dd2f74f8fcc037ede1222f73f81e (diff) | |
| download | HydroRoll-e76a5f847e78fee4e62f6eb37d468557a1504c55.tar.gz HydroRoll-e76a5f847e78fee4e62f6eb37d468557a1504c55.zip | |
Diffstat (limited to 'docs/components/pages/pack-home/PackDropdown.tsx')
| -rw-r--r-- | docs/components/pages/pack-home/PackDropdown.tsx | 117 |
1 files changed, 0 insertions, 117 deletions
diff --git a/docs/components/pages/pack-home/PackDropdown.tsx b/docs/components/pages/pack-home/PackDropdown.tsx deleted file mode 100644 index 7ff5d76..0000000 --- a/docs/components/pages/pack-home/PackDropdown.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import { useState, Fragment } from "react"; -import { Listbox, Transition } from "@headlessui/react"; -import { BenchmarkNumberOfModules } from "./PackBenchmarks"; - -export function PackDropdown({ - onOptionSelected, -}: { - onOptionSelected: (option: BenchmarkNumberOfModules) => void; -}) { - const [selectedOption, setSelectedOption] = - useState<BenchmarkNumberOfModules>("1000"); - - const onSelect = (option: BenchmarkNumberOfModules) => { - onOptionSelected(option); - setSelectedOption(option); - }; - - return ( - <div className="relative"> - <Listbox value={selectedOption} onChange={onSelect}> - <Listbox.Button className="flex w-24 pl-3 pr-2 py-2 gap-3 rounded !bg-[#fafafa] dark:!bg-[#111111] dark:hover:text-white hover:text-black dark:text-[#888888] text-[#666666] items-center justify-between transition-all text-sm leading-none font-medium m-0"> - {Number(selectedOption).toLocaleString()} - <Arrow /> - </Listbox.Button> - - <Transition - as={Fragment} - leave="transition ease-in duration-100" - leaveFrom="opacity-100" - leaveTo="opacity-0" - > - <Listbox.Options className="absolute left-0 mt-2 w-full dark:bg-[#111111] bg-[#FAFAFA] rounded py-1 z-50 list"> - <Listbox.Option - value="1000" - className={({ active }) => - `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ - active ? "bg-gray-800 text-gray-100" : "text-gray-900" - }` - } - > - 1000 - </Listbox.Option> - <Listbox.Option - className={({ active }) => - `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ - active ? "bg-gray-800 text-gray-100" : "text-gray-900" - }` - } - value="5000" - > - 5000 - </Listbox.Option> - <Listbox.Option - className={({ active }) => - `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ - active ? "bg-gray-800 text-gray-100" : "text-gray-900" - }` - } - value="10000" - > - 10000 - </Listbox.Option> - <Listbox.Option - className={({ active }) => - `relative cursor-default select-none py-1 text-sm pl-3 text-gray-400 ${ - active ? "bg-gray-800 text-gray-100" : "text-gray-900" - }` - } - value="30000" - > - 30000 - </Listbox.Option> - </Listbox.Options> - </Transition> - </Listbox> - </div> - ); -} - -function BenchmarkOption({ - value, - onSelect, -}: { - value: BenchmarkNumberOfModules; - onSelect: (value: string) => void; -}) { - return ( - <div - className="flex pl-3 py-2 items-center justify-between cursor-pointer transition-all dark:text-[#888888] dark:hover:text-white text-[#666666] hover:text-[#000]" - onClick={() => onSelect(value)} - > - <p className="text-sm leading-none font-medium m-0"> - {Number(value).toLocaleString()} - </p> - </div> - ); -} - -function Arrow() { - return ( - <svg - width="16" - height="16" - viewBox="0 0 16 16" - fill="none" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M4 6L8 10L12 6" - stroke="#666666" - strokeWidth="1.5" - strokeLinecap="round" - strokeLinejoin="round" - /> - </svg> - ); -} |
