[feat] new gui

src/lib/UI/GUI/TextAreaInput.svelte

@@ -0,0 +1,64 @@
+<!-- <textarea
+    class={"bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none focus:bg-selected w-full" + ((additionalClass) ? (' ' + additionalClass) : '')}
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:text-xl={size === 'xl'}
+    class:text-xs={size === 'xs'}
+    class:p-2={padding}
+    class:mb-4={margin === 'bottom'}
+    class:mb-2={margin === 'both'}
+    class:mt-4={margin === 'top'}
+    class:mt-2={margin === 'both'}
+    class:w-full={fullwidth}
+    class:h-20={height === '20'}
+    class:h-32={height === '32'}
+    class:h-full={height === 'full'}
+    class:min-h-20={height === '20'}
+    class:min-h-32={height === '32'}
+
+    {autocomplete}
+    {placeholder}
+    id={id}
+    bind:value
+    on:input={onInput}
+/> -->
+
+<textarea 
+    class={"border border-gray-600 focus:border-borderc resize-none rounded-md shadow-sm text-white bg-transparent focus:ring-borderc focus:ring-2 focus:outline-none transition-colors duration-200" + ((additionalClass) ? (' ' + additionalClass) : '')} 
+    class:text-sm={size === 'sm'}
+    class:text-md={size === 'md'}
+    class:text-lg={size === 'lg'}
+    class:text-xl={size === 'xl'}
+    class:text-xs={size === 'xs'}
+    class:px-4={padding}
+    class:py-2={padding}
+    class:mb-4={margin === 'bottom'}
+    class:mb-2={margin === 'both'}
+    class:mt-4={margin === 'top'}
+    class:mt-2={margin === 'both'}
+    class:w-full={fullwidth}
+    class:h-20={height === '20'}
+    class:h-32={height === '32'}
+    class:h-full={height === 'full'}
+    class:min-h-20={height === '20'}
+    class:min-h-32={height === '32'}
+    {autocomplete}
+    {placeholder}
+    id={id}
+    bind:value
+    on:input={onInput}
+/>
+<script lang="ts">
+    export let size: 'xs'|'sm'|'md'|'lg'|'xl' = 'xs'
+    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 margin:"none"|"top"|"bottom"|"both" = "none"
+    export let onInput = () => {}
+    export let fullwidth = false
+    export let height:'20'|'32'|'full' = '20'
+    export let additionalClass = ''
+</script>