✨ (buttons) Add searchable choices

Closes #473

packages/embeds/js/src/components/inputs/SearchInput.tsx

@@ -0,0 +1,43 @@
+import { Show, createSignal, splitProps } from 'solid-js'
+import { JSX } from 'solid-js/jsx-runtime'
+import { CloseIcon } from '../icons/CloseIcon'
+
+type Props = {
+  ref: HTMLInputElement | undefined
+  onInput: (value: string) => void
+  onClear: () => void
+} & Omit<JSX.InputHTMLAttributes<HTMLInputElement>, 'onInput'>
+
+export const SearchInput = (props: Props) => {
+  const [value, setValue] = createSignal('')
+  const [local, others] = splitProps(props, ['onInput', 'ref'])
+
+  const changeValue = (value: string) => {
+    setValue(value)
+    local.onInput(value)
+  }
+
+  const clearValue = () => {
+    setValue('')
+    props.onClear()
+  }
+
+  return (
+    <div class="flex justify-between items-center gap-2 w-full pr-4">
+      <input
+        ref={props.ref}
+        class="focus:outline-none bg-transparent px-4 py-4 flex-1 w-full text-input"
+        type="text"
+        style={{ 'font-size': '16px' }}
+        value={value()}
+        onInput={(e) => changeValue(e.currentTarget.value)}
+        {...others}
+      />
+      <Show when={value().length > 0}>
+        <button class="w-5 h-5" on:click={clearValue}>
+          <CloseIcon />
+        </button>
+      </Show>
+    </div>
+  )
+}