From e7dd4ddc7b0073afb2f9b24fbd526ad191bf2482 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Sat, 24 Feb 2024 21:26:17 -0800
Subject: [PATCH] feat: add input setting type

---
 .../lib/Apps/Settings/SettingsInput.svelte    | 52 +++++++++++++++++++
 1 file changed, 52 insertions(+)
 create mode 100644 client/src/lib/Apps/Settings/SettingsInput.svelte

diff --git a/client/src/lib/Apps/Settings/SettingsInput.svelte b/client/src/lib/Apps/Settings/SettingsInput.svelte
new file mode 100644
index 0000000..f154d34
--- /dev/null
+++ b/client/src/lib/Apps/Settings/SettingsInput.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import { onMount, tick } from 'svelte'
+  import { settingsStore } from '../../stores/settingsStore'
+  import type { SettingsStoreData } from '../../stores/settingsStore'
+  import { tooltip as tooltipAction } from '@svelte-plugins/tooltips'
+  import { get } from 'svelte/store'
+
+  export let setting: keyof SettingsStoreData
+  export let tooltip: string
+  export let width: string = 'auto'
+
+  let value: string
+
+  const handleSubmit = async () => {
+    await tick()
+    // @ts-expect-error
+    settingsStore.update(setting, value)
+  }
+
+  const checkKeyPress = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSubmit()
+    }
+  }
+
+  onMount(async () => {
+    await tick()
+    // @ts-expect-error
+    value = get(settingsStore)[setting]
+  })
+</script>
+
+<span class="flex flex-row gap-2">
+  <input
+    bind:value
+    type="text"
+    on:keydown={checkKeyPress}
+    style="width: {width};"
+    class="text-slate-800 rounded-lg p-0.5 text-center"
+  />
+  <button
+    class="bg-blue-500 px-4 py-2 rounded-lg hover:brightness-75 font-medium"
+    on:click={handleSubmit}
+  >
+    Save
+  </button>
+  <label
+    class="text-xl text-slate-100 font-medium my-auto"
+    use:tooltipAction={{ content: tooltip, action: 'hover', arrow: false }}
+    for={setting}><slot /></label
+  >
+</span>