Add version dropdown

ada-url · Sep 26, 2024 · dac2f1c · dac2f1c
1 parent 6f6fd63
commit dac2f1c
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 18 deletions.
diff --git a/astro/components/playground/form.tsx b/astro/components/playground/form.tsx
@@ -1,5 +1,5 @@
 import WASM from '@/lib/wasm/wasm.js'
-import { Loader2 } from 'lucide-react'
+import { ChevronDown, Loader2 } from 'lucide-react'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { useForm } from 'react-hook-form'
 import ParsingResult, { type WASMResponse } from './result'
@@ -10,6 +10,8 @@ let wasm: {
   parse: (url: string) => WASMResponse & { delete: VoidFunction }
 }
 
+const versions = ['2.9.2', '2.9.1', '2.9.0', '2.8.0']
+
 function toJS(obj: Record<string, any>): any {
   const result: Record<string, any> = {}
   for (const key of Object.keys(obj.__proto__)) {
@@ -21,7 +23,7 @@ function toJS(obj: Record<string, any>): any {
 export default function PlaygroundForm() {
   //const router = useRouter()
   const { toast } = useToast()
-  const { handleSubmit, register, formState } = useForm<{ url: string }>()
+  const { handleSubmit, register, formState } = useForm<{ url: string; version: string }>()
   const [output, setOutput] = useState<WASMResponse | undefined>()
   const searchParams = useMemo<URLSearchParams>(
     () => new URLSearchParams(window.location.search),
@@ -35,7 +37,7 @@ export default function PlaygroundForm() {
     return window.location.href
   }, [searchParams.get])
   const onSubmit = useCallback(
-    async (data: { url: string }) => {
+    async (data: { url: string; version: string }) => {
       try {
         wasm ??= await WASM()
         const result = wasm.parse(data.url)
@@ -56,25 +58,38 @@ export default function PlaygroundForm() {
   )
 
   useEffect(() => {
-    onSubmit({ url: defaultValue })
+    onSubmit({ url: defaultValue, version: versions[0] })
   }, [defaultValue, onSubmit])
 
   return (
     <div className={`${styles.formContainer} not-content`}>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <input
-          type='text'
-          required
-          placeholder='Please enter a valid URL to parse through Ada'
-          defaultValue={defaultValue}
-          {...register('url', { required: true })}
-          className={styles.Input}
-        />
+        <label className={styles.Label}>
+          <select className={styles.Select} {...register('version')}>
+            {versions.map((value, index) => (
+              <option className={styles.Option} value={value} key={value}>
+                {value}
+              </option>
+            ))}
+          </select>
+          <ChevronDown className={`${styles.Icon} ${styles.Caret}`} />
+        </label>
+
+        <div>
+          <input
+            type='text'
+            required
+            placeholder='Please enter a valid URL to parse through Ada'
+            defaultValue={defaultValue}
+            {...register('url', { required: true })}
+            className={styles.Input}
+          />
 
-        <button type='submit' disabled={formState.isLoading} className={styles.Button}>
-          {formState.isLoading && <Loader2 className={styles.loader} />}
-          Parse
-        </button>
+          <button type='submit' disabled={formState.isLoading} className={styles.Button}>
+            {formState.isLoading && <Loader2 className={styles.loader} />}
+            Parse
+          </button>
+        </div>
       </form>
 
       {output !== undefined ? <ParsingResult {...output} /> : null}

diff --git a/astro/components/playground/styles/form.module.css b/astro/components/playground/styles/form.module.css
@@ -5,6 +5,12 @@
 }
 
 form {
+    display: flex;
+    flex-direction: column;
+    row-gap: 1rem;
+}
+
+form > div {
     display: flex;
     flex-direction: row;
     column-gap: 1rem;
@@ -27,7 +33,8 @@ form {
     background-color: var(--sl-color-gray-1);
     color: var(--sl-color-black);
     height: 2.5rem;
-    width: 8rem;
+    width: fit-content;
+    padding-inline: 1rem;
     outline-offset: 0.25rem;
     border-width: 0;
 }
@@ -55,13 +62,58 @@ form {
 }
 
 .Input:hover {
-    border: 1px solid var(--sl-color-white);    
+    border: 1px solid var(--sl-color-white);
 }
+
 .Input:disabled {
     cursor: not-allowed;
     opacity: 0.5;
 }
 
+.Label {
+    position: relative;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0.25rem;
+    color: var(--sl-color-gray-1);
+}
+
+.Icon {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+.Caret {
+    width: 1rem;
+    height: 1rem;
+    inset-inline-end: 0;
+}
+
+.Select {
+    align-self: self-end;
+    background-color: transparent;
+    text-overflow: ellipsis;
+    color: inherit;
+    cursor: pointer;
+    appearance: none;
+    font-size: var(--sl-text-sm);
+    border: 0;
+    padding-inline: 1.25rem;
+}
+
+.Option {
+    background-color: var(--sl-color-bg-nav);
+    color: var(--sl-color-gray-1);
+}
+
+@media (min-width: 50rem) {
+    .Button {
+        width: 8rem;
+    }
+}
 @keyframes spin {
     from {
         transform: rotate(0deg);