Quickly scroll to the prompt information location (#68)

Co-authored-by: bluwy <[email protected]>

site/src/components/Label.svelte

@@ -1,10 +1,20 @@
 <script>
   import { messageTypeToColor } from '../utils/colors'
+
   export let type
+
+  function handleClick() {
+    const el = document.querySelector(`.message-type-${type}`)
+    el?.scrollIntoView({ behavior: 'smooth' })
+  }
 </script>
 
-<span
-  class="border-2 px-2 py-1 rounded-lg text-black {messageTypeToColor(type)}"
+<button
+  class="
+    inline text-base leading-tight border-none px-2 py-1 rounded-lg
+    {messageTypeToColor(type)}
+  "
+  on:click={handleClick}
 >
   <slot />
-</span>
+</button>

site/src/components/PkgNode.svelte

@@ -74,7 +74,12 @@
     />
     <div class="-mx-4">
       {#each shownMessages as msg}
-        <div class="{messageTypeToColor(msg.type)} border-4 px-4 py-2">
+        <div
+          class="
+            {messageTypeToColor(msg.type)}
+            message-type-{msg.type} border-4 px-4 py-2 scroll-mt-8
+          "
+        >
           {@html formatMessage(msg, pkg)}
         </div>
       {/each}

site/src/global.css

@@ -19,6 +19,10 @@ body {
     Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 }
 
+button {
+  cursor: pointer;
+}
+
 .docs h1 {
   margin-bottom: 1rem;
   position: relative;