From 4c30ede61b1cf1fe15ef72f7399f88ce72f863a8 Mon Sep 17 00:00:00 2001
From: Mel <einebeere@gmail.com>
Date: Sat, 19 Feb 2022 22:48:49 +0100
Subject: Text or Files sharing selector

---
 .../components/share/selector/DataSelector.svelte  | 62 ++++++++++++++++++++++
 1 file changed, 62 insertions(+)
 create mode 100644 assets/src/components/share/selector/DataSelector.svelte

(limited to 'assets/src/components/share/selector/DataSelector.svelte')

diff --git a/assets/src/components/share/selector/DataSelector.svelte b/assets/src/components/share/selector/DataSelector.svelte
new file mode 100644
index 0000000..33d971e
--- /dev/null
+++ b/assets/src/components/share/selector/DataSelector.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+    import { DataType } from "../../../models/data_type";
+    import { ChoosingData, getShareState } from "../../../state/share";
+    import ShareIcon from "../../icons/ShareIcon.svelte";
+    import DataTypePicker from "./DataTypePicker.svelte";
+
+    let value = "";
+
+    const submit = () => {
+        const share = getShareState().state as ChoosingData;
+        share.submitData(value);
+    };
+
+    let type: DataType = DataType.TEXT;
+
+    function setType(t: DataType) {
+        type = t;
+        value = "";
+    }
+
+    // TODO: Accept data other than text.
+</script>
+
+<DataTypePicker {type} {setType} />
+{#if type === DataType.TEXT}
+    <form on:submit|preventDefault={submit}>
+        <!-- TODO: Prettier input field -->
+        <input type="text" bind:value />
+        <button class="start-sharing-button" type="submit">
+            <ShareIcon color="black" />
+            Start Sharing
+        </button>
+    </form>
+{:else}
+    <p>No file sharing yet!</p>
+{/if}
+
+<style>
+    input {
+        border: none;
+        font-size: 14px;
+        color: black;
+        background-color: white;
+        padding: 10px 20px;
+        box-sizing: border-box;
+    }
+
+    .start-sharing-button {
+        border: none;
+        font-size: 14px;
+        background-color: white;
+        color: black;
+        padding: 10px 14px;
+
+        display: flex;
+
+        align-items: center;
+        gap: 10px;
+
+        margin-top: 20px;
+    }
+</style>
-- 
cgit 1.4.1