[ref] input to components

src/lib/Setting/lorepreset.svelte

@@ -3,6 +3,7 @@
     import { language } from "../../lang";
     import { DataBase } from "../../ts/storage/database";
     import { EditIcon, PlusIcon, TrashIcon, XIcon } from "lucide-svelte";
+  import TextInput from "../UI/GUI/TextInput.svelte";
     let editMode = false
     export let close = () => {}
 </script>
@@ -24,7 +25,7 @@
                 }
             }} class="flex items-center text-neutral-200 border-t-1 border-solid border-0 border-gray-600 p-2 cursor-pointer" class:bg-selected={ind === $DataBase.loreBookPage}>
                 {#if editMode}
-                    <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected" bind:value={$DataBase.loreBook[ind].name} placeholder="string">
+                    <TextInput bind:value={$DataBase.loreBook[ind].name} placeholder="string" padding={false}/>
                 {:else}
                     <span>{lore.name}</span>
                 {/if}