♻ Reworked warning (closeable)

Author: codewithkyle

public/index.html

@@ -35,6 +35,7 @@
         <link rel="stylesheet" href="/css/link.css" />
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/github-dark-dimmed.min.css" />
         <script defer src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
+        <script defer src="https://unpkg.com/alpinejs@3.13.2/dist/cdn.min.js"></script>
         <script type="module" src="/js/bootstrap.js"></script>
         <script type="module" src="/js/tooltipper.js"></script>
         <script type="module" src="/js/soundscape.js"></script>
@@ -177,9 +178,24 @@ <h1 class="font-xl font-bold">Brixi UI</h1>
         </header>
         <nav-component></nav-component>
         <component-viewer></component-viewer>
-        <div style="z-index:9999;max-width:calc(100vw - 3.5rem);" class="shadow-black-lg fixed inline-block w-768 b-0 r-0 mr-2.5 mb-1 bg-white dark:bg-grey-800 p-2 radius-0.5 border-solid border-1 border-grey-300 dark:border-grey-800 font-grey-700 dark:font-white">
-            <h1 class="font-xl mb-1 font-bold font-warning-500">Warning</h1>
-            <p class="line-snug">This website is currently showcasing an experimental build of Brixi UI. The styles of various components have been updated but the docs have not. If you need to access the source code for any component <a class="link" href="https://github.com/codewithkyle/brixi-ui">check the master branch on GitHub</a>.</p>
+        <div 
+            style="z-index:9999;max-width:calc(100vw - 3.5rem);" 
+            class="shadow-black-lg fixed w-768 b-0 r-0 mr-2.5 mb-1 bg-white dark:bg-grey-800 p-2 radius-0.5 border-solid border-1 border-grey-300 dark:border-grey-800 font-grey-700 dark:font-white"
+            x-data="{ show: sessionStorage.getItem('seen-experimental-warning') == null }"
+            x-show="show"
+        >
+            <button 
+                class="absolute t-0 r-0 mt-1 mr-1 font-grey-600 dark:font-white"
+                x-on:click="sessionStorage.setItem('seen-experimental-warning', 'true'); show = false;"
+            >
+                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-x" width="18" height="18" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+                    <path d="M18 6l-12 12"></path>
+                    <path d="M6 6l12 12"></path>
+                </svg>
+            </button>
+            <h1 class="font-xl mb-1 font-bold font-warning-500">Experimental Warning</h1>
+            <p class="line-snug">This website is currently showcasing an experimental build of Brixi UI for MPAs (multi-page apps). All of the MPA componets are experimental and will change without notice.</p>
         </div>
     </body>
 </html>