From 877f2aa4cc5890214f0c58813c4b498f8be1236d Mon Sep 17 00:00:00 2001
From: Melonai <einebeere@gmail.com>
Date: Mon, 16 Aug 2021 15:55:55 +0200
Subject: Improve display of data

---
 assets/src/components/DataView.svelte | 47 +++++++++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 assets/src/components/DataView.svelte

(limited to 'assets/src/components/DataView.svelte')

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>
-- 
cgit 1.4.1

