feat: add hint text

ADOFAI-gg · Dec 20, 2023 · a467023 · a467023
1 parent 7a7826e
commit a467023
Showing 1 changed file with 41 additions and 0 deletions.
diff --git a/src/components/atoms/auth/Hint.svelte b/src/components/atoms/auth/Hint.svelte
@@ -0,0 +1,41 @@
+<script lang="ts">
+  export let warn: boolean = false;
+</script>
+
+<div class="hint">
+  {#if warn}
+    <div class="warn-marker" />
+    <p class="warn">
+      <slot />
+    </p>
+  {:else}
+    <p class="normal">
+      <slot />
+    </p>
+  {/if}
+</div>
+
+<style lang="scss">
+  .hint {
+    display: flex;
+    flex-direction: row;
+    column-gap: 6px;
+    align-items: center;
+
+    .normal {
+      font-size: 12px;
+    }
+
+    .warn {
+      font-size: 14px;
+      color: rgb(var(--color-red));
+    }
+
+    .warn-marker {
+      width: 8px;
+      height: 8px;
+      border-radius: 100%;
+      background-color: rgb(var(--color-red));
+    }
+  }
+</style>