[ref] input to components

src/lib/UI/GUI/NumberInput.svelte

@@ -0,0 +1,31 @@
+<input
+    class="text-neutral-200 bg-transparent input-text focus:bg-selected"
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:p-2={padding}
+    class:mb-4={marginBottom}
+    class:w-full={fullwidth}
+    class:h-full={fullh}
+    on:change={onChange}
+    type="number"
+    min={min}
+    max={max}
+    id={id}
+    bind:value
+>
+
+
+<script lang="ts">
+    export let min:number = undefined
+    export let max:number = undefined
+    export let size: 'sm'|'md'|'lg' = 'sm'
+    export let value:number
+    export let id:string = undefined
+    export let padding = true
+    export let marginBottom = false
+    export let fullwidth = false
+    export let fullh = false
+    export let onChange = () => {}
+
+</script>

src/lib/UI/GUI/SliderInput.svelte

@@ -0,0 +1,27 @@
+<input
+    class="text-neutral-200 bg-transparent input-text focus:bg-selected"
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:p-2={padding}
+    class:mb-4={marginBottom}
+    type="range"
+    min={min}
+    max={max}
+    id={id}
+    step={step}
+    bind:value
+>
+
+
+<script lang="ts">
+    export let min:number = undefined
+    export let max:number = undefined
+    export let size: 'sm'|'md'|'lg' = 'sm'
+    export let value:number
+    export let id:string = undefined
+    export let padding = true
+    export let marginBottom = false
+    export let step = 1
+
+</script>

src/lib/UI/GUI/TextInput.svelte

@@ -0,0 +1,33 @@
+<input
+    class={"text-neutral-200 bg-transparent input-text focus:bg-selected" + ((additionalClass) ? (' ' + additionalClass) : '')}
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:text-xl={size === 'xl'}
+    class:p-2={padding}
+    class:mb-4={marginBottom}
+    class:w-full={fullwidth}
+    class:h-full={fullh}
+
+    {autocomplete}
+    {placeholder}
+    id={id}
+    type="text"
+    bind:value
+    on:input={onInput}
+>
+
+
+<script lang="ts">
+    export let size: 'sm'|'md'|'lg'|'xl' = 'md'
+    export let autocomplete: 'on'|'off' = 'off'
+    export let placeholder: string = ''
+    export let value:string
+    export let id:string = undefined
+    export let padding = true
+    export let marginBottom = false
+    export let onInput = () => {}
+    export let fullwidth = false
+    export let fullh = false
+    export let additionalClass = ''
+</script>

src/lib/UI/Hub.svelte

@@ -6,6 +6,7 @@
     import { language } from "src/lang";
     import RisuHubIcon from "./RisuHubIcon.svelte";
     import { DataBase } from "src/ts/storage/database";
+  import TextInput from "./GUI/TextInput.svelte";
 
     let openedData:null|hubType = null
 
@@ -33,7 +34,7 @@
 </script>
 <div class="w-full flex justify-center mt-4">
     <div class="flex w-2xl max-w-full items-center">
-        <input class="flex-grow text-xl pl-3 pr-3 rounded-lg bg-darkbg h-16 min-w-0" placeholder="Search" bind:value={search}>
+        <TextInput size="xl" additionalClass="flex-grow" placeholder="Search" bind:value={search} />
         <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
             page = 0
             getHub()

src/lib/UI/HubUpload.svelte

@@ -25,9 +25,9 @@
         <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={char.creatorNotes}></textarea>
         <span class="text-neutral-200">{language.tags}</span>
         <span class="text-gray-400 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
-        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="" bind:value={tags} on:input={() => {
+        <TextInput marginBottom placeholder="" bind:value={tags} on:input={() => {
             tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase()
-        }}>
+        }} />
         <div class="flex items-center flex-wrap">
             <button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!privateMode} on:click={() => {privateMode = false}}>🌏 Public</button>
             <!-- <button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={privateMode} on:click={() => {privateMode = true}}>🔒 Private</button> -->
@@ -67,6 +67,7 @@
   import { alertError } from "src/ts/alert";
   import { shareRisuHub } from "src/ts/characterCards";
     import { DataBase, type character } from "src/ts/storage/database";
+  import TextInput from "./GUI/TextInput.svelte";
     export let close = () => {}
     export let char:character
     let tags=""