merge upstream, add DropdownItem component

Author: ewof

src/pages/GenerationSettings/index.tsx

@@ -3,13 +3,23 @@ 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 = () => (
   <>
     <h1 class="text-4xl">Generation Settings Settings</h1>
     <p class="text-white/50">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="flex flex-col gap-8">
         <RangeInput 
             label="Max New Tokens"

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,21 @@
+import { Component, JSX, Show, createSignal } from "solid-js";
+
+import Button from "./Button";
+
+import { ChevronDown } from "lucide-solid";
+
+const Dropdown: Component<{ children: JSX.Element, label: string }> = (props) => {
+  const [open, setOpen] = createSignal(false);
+
+  return(
+    <div class="inline-block">
+      <Button onClick={() => {setOpen(!open())}}>
+        <ChevronDown />
+        {props.label}
+      </Button>
+      <Show when={open()}><div class="flex flex-col rounded-md bg-stone-600 drop-shadow-md">{props.children}</div></Show>
+    </div>
+  );
+};
+
+export default Dropdown;

src/shared/DropdownItem.tsx

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

src/tailwind.css

@@ -87,4 +87,5 @@
     border: none;
     background: transparent;
   }
+  
 }