From 7bdce37fd3f18e2712e18c4e2c64cac69af0aca1 Mon Sep 17 00:00:00 2001
From: Jakob Stendahl <jakob.stendahl@outlook.com>
Date: Sun, 19 Sep 2021 19:43:11 +0200
Subject: :boom: Introduce new UI based on svelte, and rewrite a lot of the
 node app and the NeoRuntime

---
 src_frontend/Components/LEDConfig/Segment.svelte | 38 ++++++++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 src_frontend/Components/LEDConfig/Segment.svelte

(limited to 'src_frontend/Components/LEDConfig/Segment.svelte')

diff --git a/src_frontend/Components/LEDConfig/Segment.svelte b/src_frontend/Components/LEDConfig/Segment.svelte
new file mode 100644
index 0000000..3b71451
--- /dev/null
+++ b/src_frontend/Components/LEDConfig/Segment.svelte
@@ -0,0 +1,38 @@
+<script>
+    import { fade } from 'svelte/transition';
+    export let id;
+    export let ledCount;
+</script>
+
+<style>
+    div {
+        display: flex;
+        flex-direction: column;
+    }
+    input {
+        display: inline-block;
+        padding: 10px 10px 10px 10px;
+        width: 38px;
+        text-align: right;
+        background-color: var(--grey-300);
+        border: none;
+        border-radius: 5px 5px 0 0;
+        margin: 0;
+    }
+    input:focus {
+        outline: none;
+        background-color: var(--grey-400);
+    }
+    span {
+        background-color: var(--grey-500);
+        font-size: 12px;
+        padding: 2px;
+        border-radius: 0 0 5px 5px;
+        text-align: center;
+    }
+</style>
+
+<div transition:fade|local>
+    <input on:change on:blur type="number" data-id={id} step=1 bind:value={ledCount} />
+    <span>{id}</span>
+</div>
\ No newline at end of file
-- 
cgit v1.2.3

