2 files changed, 109 insertions, 0 deletions
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>
diff --git a/assets/src/components/share/selector/DataTypePicker.svelte b/assets/src/components/share/selector/DataTypePicker.svelte
new file mode 100644
index 0000000..204b0c5
--- /dev/null
+++ b/assets/src/components/share/selector/DataTypePicker.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import { DataType } from "../../../models/data_type";
+
+    export let type: DataType;
+
+    export let setType: (type: DataType) => void;
+
+    function setText() {
+        setType(DataType.TEXT);
+    }
+
+    function setFiles() {
+        setType(DataType.FILES);
+    }
+</script>
+
+<div>
+    <span class:selected={type === DataType.TEXT} on:click={setText}>
+        Text
+    </span>
+    <span class="splitter">|</span>
+    <span class:selected={type === DataType.FILES} on:click={setFiles}>
+        Files
+    </span>
+</div>
+
+<style>
+    div {
+        margin-bottom: 20px;
+    }
+
+    span {
+        font-size: 16px;
+        color: #626262;
+        cursor: pointer;
+    }
+
+    .splitter {
+        padding: 0 20px;
+        cursor: default;
+        user-select: none;
+    }
+
+    .selected {
+        color: white;
+    }
+</style>