1 files changed, 45 insertions, 0 deletions
diff --git a/src/components/Comment.svelte b/src/components/Comment.svelte
new file mode 100644
index 0000000..09469cc
--- /dev/null
+++ b/src/components/Comment.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { creatorColor, formatTime } from '../lib/util';
+  import type Comment from '../models/Thread';
+  export let comment: Comment;
+</script>
+
+
+<div class="commentbox" id="{comment.id}">
+
+  <span style="line-height: 2rem;">
+    {comment.id}
+    at {formatTime(comment.creationDate)} <br>
+    ->  <span style="{creatorColor(comment.commentCreator)}">
+      {comment.commentCreator}
+    </span> <br>
+  </span>
+
+    {#if comment.imageId!= null && comment.imageId != undefined}
+      {#if comment.fileType == 'image'}
+        <a href="{comment.imageId}" target="_blank" rel="noopener noreferrer">
+          <img src="{comment.imageId}" alt="{comment.imageId}" height="300px" width="300px"> <br>
+        </a>
+      {:else if comment.fileType == 'video'}
+        <video width="320" height="240" controls muted>
+          <source src="{comment.imageId}">
+        </video>
+      {/if}
+    {/if}
+
+<p>{@html comment.commentText}</p>
+
+</div>
+
+<style>
+  .commentbox {
+    width: 500px;
+    border: 5px solid green;
+    padding: 10px;
+    margin: 10px;
+    background-color: white;
+  }
+  :target, .targeted {
+    background-color: #ffa;
+  }
+</style>