<script>
    import GlowFX from "./fx/glowfx.svelte";

  /**
   * @type {import("$types/base").Category[]}
   */
  export let categories;
</script>

<style>
  aside {
    display: flex;
    flex-direction: column;
    
    padding: 8px;
    gap: 8px;
  }

  .button {
    height: 32px;
    width: 32px;
    padding: 8px;
    background-color: rgb(255, 88, 88, 0.2);
    border-radius: 8px;
  }

  .button svg use {
    color: rgb(255, 88, 88);
  }
</style>

<aside>
  {#each categories as category}
  <GlowFX borderRadius={8}>
    <div class="button">
      <svg viewBox="0 0 24 24">
        <use href="/icon/bulb.svg#icon"></use>
      </svg>
    </div>
  </GlowFX>
  {/each}
</aside>
