😀

1 files changed, 117 insertions, 0 deletions

diff --git a/docs/components/pages/pack-home/PackDropdown.tsx b/docs/components/pages/pack-home/PackDropdown.tsx
new file mode 100644
index 0000000..7ff5d76
--- /dev/null
+++ b/docs/components/pages/pack-home/PackDropdown.tsx
@@ -0,0 +1,117 @@
+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>
+  );
+}