5 files changed, 40 insertions, 6 deletions
diff --git a/assets/src/components/Request.svelte b/assets/src/components/RequestPage.svelte
index 0c0b111..0c0b111 100644
--- a/assets/src/components/Request.svelte
+++ b/assets/src/components/RequestPage.svelte
diff --git a/assets/src/components/Share.svelte b/assets/src/components/SharePage.svelte
index 5ea55b2..d951288 100644
--- a/assets/src/components/Share.svelte
+++ b/assets/src/components/SharePage.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
     import data from "../stores/data";
-    import DataPicker from "./DataPicker.svelte";
-    import IncomingRequests from "./IncomingRequests.svelte";
+    import DataPicker from "./share/DataPicker.svelte";
+    import IncomingRequests from "./share/Requests.svelte";
 </script>
 
 <main>
diff --git a/assets/src/components/DataPicker.svelte b/assets/src/components/share/DataPicker.svelte
index 433018d..6e8dbd4 100644
--- a/assets/src/components/DataPicker.svelte
+++ b/assets/src/components/share/DataPicker.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-    import data from "../stores/data";
+    import data from "../../stores/data";
 
     let value = "";
 
     const submit = () => {
         data.set(value);
     };
+
+    // TODO: Accept data other than text.
 </script>
 
 <form on:submit|preventDefault={submit}>
diff --git a/assets/src/components/share/Request.svelte b/assets/src/components/share/Request.svelte
new file mode 100644
index 0000000..26002ae
--- /dev/null
+++ b/assets/src/components/share/Request.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { offer } from "../../network/transfer/transfer";
+
+    export let token: string;
+
+    async function accept() {
+        const transfer = await offer(token);
+    }
+
+    function decline() {}
+</script>
+
+<div class="container">
+    <span>{token}</span>
+    <div class="buttons">
+        <button on:click={accept}>Accept</button>
+        <button on:click={decline}>X</button>
+    </div>
+</div>
+
+<style>
+    .container {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .buttons {
+        display: flex;
+    }
+</style>
diff --git a/assets/src/components/IncomingRequests.svelte b/assets/src/components/share/Requests.svelte
index bf08ffe..509d7be 100644
--- a/assets/src/components/IncomingRequests.svelte
+++ b/assets/src/components/share/Requests.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { getOwnToken, start, Type } from "../network/channel/connection";
+    import { getOwnToken, start, Type } from "../../network/channel/connection";
 
-    import requests from "../stores/requests";
+    import requests from "../../stores/requests";
+    import Request from "./Request.svelte";
 
     const startPromise = start(Type.SHARE);
 
@@ -14,6 +15,6 @@
     <h3>Your token is <b>{getOwnToken()}</b>.</h3>
 
     {#each $requests as request}
-        <p>{JSON.stringify(request)}</p>
+        <Request token={request} />
     {/each}
 {/await}