Refactor folder structure

2022-06-17 19:58:01 -07:00
parent 8204139df8
commit 137fbb638b
110 changed files with 45 additions and 52 deletions
--- a/src/components/TextInput.svelte
+++ b/src/components/TextInput.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import type { SvelteComponent } from 'svelte'
+
+	export let placeholder = ''
+	export let icon: SvelteComponent = undefined
+	export let value = ''
+	export let multiline = false
+	export let id: string = undefined
+	export let fill = false
+</script>
+
+<div class="text-input" class:fill>
+	{#if multiline}
+		<textarea {id} {placeholder} bind:value />
+	{:else}
+		<input type="text" {id} {placeholder} bind:value class:has-icon={icon} />
+		{#if icon}
+			<svelte:component this={icon} />
+		{/if}
+	{/if}
+</div>
+
+<style lang="postcss">
+	.text-input {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		position: relative;
+		width: 20rem;
+
+		&.fill {
+			width: 100%;
+			flex: 1;
+		}
+
+		input,
+		textarea {
+			border-radius: var(--rounded);
+			box-shadow: var(--shadow-inset-sm);
+			background-color: var(--color-button-bg);
+			border: none;
+			width: 100%;
+			max-width: 100%;
+
+			&.has-icon {
+				padding-left: 2.5rem;
+			}
+		}
+
+		input {
+			padding: 0.25rem 1rem;
+		}
+
+		textarea {
+			min-height: 2.5rem;
+			padding: 0.5rem 1rem;
+		}
+
+		:global(.icon) {
+			position: absolute;
+			display: flex;
+			height: 100%;
+			left: 1rem;
+			opacity: 0.75;
+		}
+	}
+</style>