Improve display of data

1 files changed, 47 insertions, 0 deletions

diff --git a/assets/src/components/DataView.svelte b/assets/src/components/DataView.svelte
new file mode 100644
index 0000000..7955d84
--- /dev/null
+++ b/assets/src/components/DataView.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import data from "../stores/data";
+    import EyeOpenedIcon from "./icons/EyeOpenedIcon.svelte";
+    import EyeClosedIcon from "./icons/EyeClosedIcon.svelte";
+
+    let hidden = true;
+
+    function toggle() {
+        hidden = !hidden;
+    }
+</script>
+
+<div class="data-view">
+    <input type={hidden ? "password" : "text"} value={$data.data} readonly />
+    <button on:click={toggle} class="icon">
+        {#if hidden}
+            <EyeOpenedIcon color="black" />
+        {:else}
+            <EyeClosedIcon color="black" />
+        {/if}
+    </button>
+</div>
+
+<style>
+    .data-view {
+        font-size: 14px;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 20px;
+        display: flex;
+        align-items: center;
+    }
+
+    .icon {
+        border: none;
+        background: none;
+        display: flex;
+        align-items: center;
+    }
+
+    input {
+        flex: 1;
+        outline: none;
+        border: none;
+        padding: 0;
+    }
+</style>