dropdown

package.json

@@ -21,13 +21,15 @@
   },
   "license": "AGPL-3.0",
   "dependencies": {
+    "@popperjs/core": "^2.11.6",
     "@solidjs/router": "^0.6.0",
     "@tanstack/solid-query": "^4.24.4",
     "js-cookie": "^3.0.1",
     "lodash": "^4.17.21",
     "lucide-solid": "0.105.0-alpha.9",
     "showdown": "^2.1.0",
-    "solid-js": "^1.6.9"
+    "solid-js": "^1.6.9",
+    "solid-popper": "^0.3.0"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",

src/pages/GenerationSettings/index.tsx

@@ -3,6 +3,8 @@ import { Save, X } from "lucide-solid";
 
 import Button from "../../shared/Button";
 import RangeInput from "../../shared/RangeInput";
+import Dropdown from "../../shared/Dropdown";
+import DropdownItem from "../../shared/DropdownItem";
 
 const GenerationSettings: Component = () => (
   <>
@@ -11,6 +13,15 @@ const GenerationSettings: Component = () => (
       Some settings might not show up depending on which inference backend is
       being used.
     </p>
+
+    <div class="my-4 border-b border-white/5" />
+    <Dropdown label="Preset">
+      <DropdownItem>Classic-Pygmalion-6b</DropdownItem>
+      <DropdownItem>Calibrated-Pygmalion-6b</DropdownItem>
+      <DropdownItem>GPU-Pygmalion-6b</DropdownItem>
+      <DropdownItem>DragonSlayer-Pygmalion-6b</DropdownItem>
+      <DropdownItem>Classic-Pygmalion-2.7b</DropdownItem>
+    </Dropdown>
     <div class="my-4 border-b border-white/5" />
 
     <div class="flex flex-col gap-8">

src/shared/Button.tsx

@@ -9,6 +9,7 @@ const schemaNameToClass: Record<ButtonSchema, string> = {
 
 const Button: Component<{
   children: JSX.Element;
+  onClick?: JSX.EventHandler<HTMLButtonElement, MouseEvent>;
   schema?: ButtonSchema;
   type?: "submit" | "reset" | "button";
   disabled?: boolean;
@@ -17,6 +18,7 @@ const Button: Component<{
     type={props.type || "button"}
     class={`${schemaNameToClass[props.schema || "primary"]} justify-center`}
     disabled={props.disabled}
+    onClick={props.onClick}
   >
     {props.children}
   </button>

src/shared/Dropdown.tsx

@@ -0,0 +1,58 @@
+import { ChevronDown } from "lucide-solid";
+import { Component, JSX, createSignal } from "solid-js";
+import usePopper from "solid-popper";
+
+import Button from "./Button";
+
+const Dropdown: Component<{ children: JSX.Element; label: string }> = (
+  props
+) => {
+  const [open, setOpen] = createSignal(false);
+  const [dropdown, setDropdown] = createSignal();
+  const [dropdownMenu, setDropdownMenu] = createSignal();
+
+  usePopper(dropdown, dropdownMenu, {
+    placement: "bottom-start",
+  });
+
+  window.onclick = function (e) {
+    const dropdownButton = (dropdown() as unknown as HTMLElement).children[0];
+    const dropdownButtonChevron = (dropdown() as unknown as HTMLElement)
+      .children[0].children[0];
+
+    if (
+      open() &&
+      e.target !== dropdownButton &&
+      e.target !== dropdownButtonChevron
+    ) {
+      setOpen(!open());
+    }
+  };
+
+  return (
+    <>
+      <div ref={setDropdown} class="lol">
+        <Button
+          onClick={() => {
+            setOpen(!open());
+          }}
+        >
+          {props.label}
+          <ChevronDown />
+        </Button>
+      </div>
+
+      <div
+        ref={setDropdownMenu}
+        id="dropdownMenu"
+        class={`${
+          open() ? "visible" : "invisible"
+        } z-10 flex flex-col rounded-md bg-stone-600 drop-shadow-md`}
+      >
+        {props.children}
+      </div>
+    </>
+  );
+};
+
+export default Dropdown;

src/shared/DropdownItem.tsx

@@ -0,0 +1,17 @@
+import { Component, JSX } from "solid-js";
+
+const DropdownItem: Component<{
+  children: JSX.Element;
+  reference?: any;
+  onClick?: JSX.EventHandler<HTMLAnchorElement, MouseEvent>;
+}> = (props) => (
+  <a
+    class="px-5 py-3 hover:bg-stone-500"
+    href={props.reference}
+    onClick={props.onClick}
+  >
+    {props.children}
+  </a>
+);
+
+export default DropdownItem;

src/shared/RangeInput.tsx

@@ -13,10 +13,10 @@ const RangeInput: Component<{
 
   function updateRangeSliders() {
     Array.from(document.getElementsByTagName("input")).forEach((input) => {
-      input.style.backgroundSize =
+      input.style.backgroundSize = `${
         ((Number(input.value) - Number(input.min)) * 100) /
-          (Number(input.max) - Number(input.min)) +
-        "% 100%";
+        (Number(input.max) - Number(input.min))
+      }% 100%`;
     });
   }