extract LevelButton component

src/App.svelte

@@ -2,7 +2,7 @@
   import Tailwind from "./Components/Tailwind.svelte"
   import Triangle from "./Triangle.svelte"
   import { levels } from "./levels.js"
-  import { completed } from "./store.js"
+  import LevelButton from "./LevelButton.svelte"
 
   let level = 0
   $: variant = levels[level].variant
@@ -13,29 +13,14 @@
   }
 </script>
 
-<style>
-  .active {
-    @apply font-bold text-gray-darker;
-  }
-
-  .completed {
-    @apply text-gray-darker bg-gray-lighter;
-  }
-</style>
-
 <Tailwind />
 
 <main class="container text-center mx-auto flex h-screen">
   <div
     class="m-auto transform-gpu sm:scale-150 md:scale-175 lg:scale-200 xl:scale-225">
-    <div class="level">
+    <div class="mb-6 flex space-x-1">
       {#each levels as _, i}
-        <button
-          class="cursor-pointer mx-2"
-          on:click={changeLevel}
-          value={i}
-          class:completed={$completed.includes(i)}
-          class:active={level == i}>{i + 1}</button>
+        <LevelButton {i} {level} on:click={changeLevel} />
       {/each}
     </div>
 

src/Button.svelte

@@ -7,13 +7,15 @@
     "M14.66 15.66A8 8 0 1 1 17 10h-2a6 6 0 1 0-1.76 4.24l1.42 1.42zM12 10h8l-4 4-4-4z"
   d["undo"] =
     "M 15,3 V 5.99 A 4,4 0 0 1 11,10 H 8 V 5 l -6,6 6,6 v -5 h 3 A 6,6 0 0 0 17,6 V 3 Z"
+  d["about"] =
+    "M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"
 </script>
 
 <button
   on:click
-  class="block flex-none rounded fill-current text-{color}-lighter px-3 py-2 border-0 border-b-2 bg-{color} border-{color}-darker active:text-{color} active:bg-{color}-darker">
+  class="capitalize flex-auto inline-flex items-center rounded fill-current text-{color}-lighter px-2 py-2 border-0 border-b-2 bg-{color} border-{color}-darker active:text-{color} active:bg-{color}-darker">
   <svg
-    class="w-5 h-5"
+    class="w-5 h-5 mr-2"
     xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 20 20"><path d={d[icon]} /></svg>
+    viewBox="0 0 20 20"><path d={d[icon]} /></svg>{icon}
 </button>

src/LevelButton.svelte

@@ -0,0 +1,23 @@
+<script>
+  import { completed } from "./store.js"
+
+  export let i
+  export let level
+</script>
+
+<style>
+  .active {
+    @apply font-bold;
+  }
+
+  .completed {
+    @apply text-blue-darker;
+  }
+</style>
+
+<button
+  class="rounded border-0 border-b-2 border-gray-darker bg-gray-lighter flex-1 text-center"
+  on:click
+  value={i}
+  class:completed={$completed.includes(i)}
+  class:active={level == i}>{i + 1}</button>

src/Triangle.svelte

@@ -321,7 +321,12 @@
 </style>
 
 <div class="outer overflow-x-hidden">
-  <div class="triangle grid-cols-9 grid-rows-5 mb-4">
+  <div>
+    <span data-cy="gameover" class:gameover>GAME OVER</span>
+    <span data-cy="victory" class:victory>VICTORY</span>
+  </div>
+
+  <div class="triangle grid-cols-9 grid-rows-5 mb-6">
     {#each circles as _, i}
       {#key circles[i]}
         <div
@@ -335,12 +340,9 @@
     {/each}
   </div>
 
-  <div class="flex">
+  <div class="flex space-x-2">
+    <Button on:click={console.log} icon="about" color="red" />
     <Button on:click={restart} icon="restart" color="blue" />
-    <div class="flex-grow">
-      <span data-cy="gameover" class:gameover>GAME OVER</span>
-      <span data-cy="victory" class:victory>VICTORY</span>
-    </div>
     <Button on:click={undo} icon="undo" />
   </div>
 </div>