Live chat app

src/components/Apps/components/LiveChat/index.svelte

@@ -1,12 +1,112 @@
 <script>
+  import marked from "marked";
   import PageNav from "../../../PageNav/index.svelte";
   import CloseButton from "../../../Buttons/Close/index.svelte";
+  import TextField from "../../../Form/TextField.svelte";
+  import SendButton from "../../../Buttons/Send/index.svelte";
 
   export let handleClose;
+
+  let message = "";
+  let bodyRef;
+  let chats = [
+    {
+      avatar: "https://picsum.photos/32/32/?random",
+      name: "Evgeniy",
+      message: "I'am looking at this and it looks great",
+    },
+    {
+      avatar: "https://picsum.photos/32/32/?random",
+      name: "Sergey Semko",
+      message:
+        "Thanks for the feedback, what do you think about my website. https://rotimibest.com",
+    },
+    {
+      avatar: "https://picsum.photos/32/32/?random",
+      name: "Vitalii Marushko",
+      message: "Всем привет",
+    },
+    {
+      avatar: "https://picsum.photos/32/32/?random",
+      name: "Natasha",
+      message: "Привет Виталий",
+    },
+  ];
+
+  function handleSend() {
+    if (!message) {
+      return;
+    }
+
+    chats = [
+      ...chats,
+      {
+        avatar: "https://picsum.photos/32/32/?random",
+        name: "You",
+        message,
+      },
+    ];
+
+    message = null;
+
+    setTimeout(() => {
+      bodyRef.scrollTo({
+        top: bodyRef.scrollHeight,
+      });
+    }, 100);
+  }
+
+  function handleKeyDown(e) {
+    if (e.key === "Enter") {
+      handleSend();
+    }
+  }
 </script>
 
+<style>
+  .body {
+    overflow: auto;
+    height: 88%;
+  }
+  .footer {
+    position: absolute;
+    bottom: 0px;
+  }
+</style>
+
 <PageNav title="LiveChat" overidableStyle="padding: 0 10px">
   <div slot="widget">
     <CloseButton onClick={handleClose} />
   </div>
 </PageNav>
+
+<div bind:this={bodyRef} class="body">
+  {#each chats as chat}
+    <div class="pl-2 pb-4">
+      <a
+        class="flex items-center no-underline hover:underline text-black"
+        href="#">
+        <img
+          alt="Placeholder"
+          class="block rounded-full"
+          width="24"
+          height="20"
+          src={chat.avatar} />
+        <p class="ml-2 text-sm font-bold">{chat.name}</p>
+      </a>
+      <article class="prose prose-sm sm:prose pt-2 pl-8">
+        {@html marked(chat.message)}
+      </article>
+    </div>
+  {/each}
+</div>
+
+<div class="footer">
+  <div class="flex items-center justify-between leading-none pl-2">
+    <TextField
+      placeholder="Say something"
+      bind:value={message}
+      onKeyDown={handleKeyDown} />
+    <SendButton onClick={handleSend} />
+  </div>
+</div>

src/components/Apps/index.svelte

@@ -48,6 +48,7 @@
     & .app {
       width: 300px;
       transition: all 1s ease-out;
+      position: relative;
     }
   }
 </style>

src/components/Buttons/Send/index.svelte

@@ -0,0 +1,10 @@
+<script>
+  import SendFilled24 from "carbon-icons-svelte/lib/SendFilled24";
+  import IconButton from "../../IconButton/index.svelte";
+
+  export let onClick;
+</script>
+
+<IconButton {onClick}>
+  <SendFilled24 class="carbon-icon" />
+</IconButton>

src/components/Course/index.svelte

@@ -17,6 +17,6 @@
 
 <PageNav title="Overview" disableSticky={true} />
 
-<div class="body">
+<div class="px-3">
   {@html marked(readme, { breaks: true, gfm: true })}
 </div>

src/components/Footer/index.svelte

@@ -1,5 +1,4 @@
 <script>
-
 </script>
 
 <style>
@@ -7,9 +6,13 @@
 </style>
 
 <!-- markup (zero or more items) goes here -->
-<div class="mx-auto my-1 lg:w-4/5 sm:w-full">
+<div class="my-1">
   <hr />
   <div class="flex justify-center w-full">
-    <span class="text-gray-700 text-sm py-2">Created with love by <a class="underline text-blue-700" href="https://twitter.com/rotimi_best" target="_blank">Rotimi Best</a></span>
+    <span class="text-gray-700 text-sm py-2">Created with love by
+      <a
+        class="underline text-blue-700"
+        href="https://twitter.com/rotimi_best"
+        target="_blank">Rotimi Best</a></span>
   </div>
 </div>

src/components/Form/TextField.svelte

@@ -2,14 +2,15 @@
   export let label;
   export let placeholder;
   export let value;
+  export let onKeyDown;
 </script>
 
 <label class="block">
-  <span class="text-gray-700">{label}</span>
+  {#if label}<span class="text-gray-700">{label}</span>{/if}
   <input
-    class="form-input mt-1 block w-full"
+    class="form-input mt-1 block w-full rounded-lg"
     type="text"
+    on:keydown={onKeyDown}
     {placeholder}
-    bind:value
+    bind:value />
-  />
 </label>

src/components/Tailwindcss.svelte

@@ -3,6 +3,30 @@
   @tailwind components;
   @tailwind utilities;
 
+  /** Global scrollbar styles */
+  html {
+    --scrollbarBG: #fff;
+    --thumbBG: #ccc;
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--thumbBG) var(--scrollbarBG);
+  }
+
+  *::-webkit-scrollbar {
+    width: 11px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: var(--scrollbarBG);
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background-color: var(--thumbBG);
+    border-radius: 10px;
+    border: 2px solid var(--scrollbarBG);
+  }
+
   h1,
   h2,
   h3,