feat: basic input field

Co-authored-by: paring <[email protected]>
ADOFAI-gg · Dec 21, 2023 · 25f3181 · 25f3181
1 parent b30b6f9
commit 25f3181
Showing 1 changed file with 60 additions and 0 deletions.
diff --git a/src/components/atoms/interaction/InputField.svelte b/src/components/atoms/interaction/InputField.svelte
@@ -0,0 +1,60 @@
+<script lang="ts">
+  import { currentLangData, type TranslationKey } from '@/utils/i18n';
+
+  export let value: TranslationKey = '';
+  export let placeholder: string = '';
+
+  $: localizedPlaceholder = $currentLangData[placeholder];
+</script>
+
+<div class="input-field-container">
+  <div class="input-field">
+    <input
+      type="text"
+      class="input-field__input"
+      placeholder={localizedPlaceholder}
+      {value}
+      {...$$restProps}
+    />
+  </div>
+</div>
+
+<style lang="scss">
+  .input-field-container {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    width: 100%;
+  }
+
+  .input-field {
+    display: flex;
+    flex-grow: 1;
+    align-self: stretch;
+    padding: 4px 0;
+
+    &__input {
+      background-color: transparent;
+      flex-grow: 1;
+      flex-shrink: 0;
+      text-align: start;
+      outline: none;
+      padding-bottom: 4px;
+
+      transition: border-bottom-color ease 0.2s;
+
+      --input-border-opacity: 0.4;
+
+      border-bottom: 1px solid rgba(255, 255, 255, var(--input-border-opacity));
+
+      &:focus {
+        --input-border-opacity: 1;
+      }
+
+      &::placeholder {
+        color: white;
+        opacity: 0.4;
+      }
+    }
+  }
+</style>