1 files changed, 38 insertions, 0 deletions
diff --git a/hi-ui/src/lib/Message.svelte b/hi-ui/src/lib/Message.svelte
new file mode 100644
index 0000000..d3ecbd8
--- /dev/null
+++ b/hi-ui/src/lib/Message.svelte
@@ -0,0 +1,38 @@
+<script>
+    import { currentUser } from '../store';
+    import { deleteMessage } from '../apiServer';
+
+    export let at;
+    export let sender;
+    export let message;
+
+    let timestamp = new Date(at).toTimeString();
+
+    function handleDeleteMessage() {
+        deleteMessage(message.id);
+    }
+</script>
+
+<div class="hover:bg-zinc-300 flex flex-row">
+    <div class="sender basis-20 text-right mr-1">
+        @{sender.name}:
+    </div>
+    <div class="body grow">
+        {message.body}
+    </div>
+    <div class="timestamp basis-6">
+        <!-- TODO: this is too long and looks awful. -->
+        <!-- {timestamp} -->
+    </div>
+    {#if sender.id === $currentUser?.id}
+        <div class="controls basis-1 hidden relative -top-3 rounded-md border-2 border-slate-600 px-1 bg-slate-300">
+            <button on:click|preventDefault={handleDeleteMessage}>&#x1F5D1;</button>
+        </div>
+    {/if}
+</div>
+
+<style>
+    div:hover .controls {
+        display: block;
+    }
+</style>