43 lines
686 B
Svelte
43 lines
686 B
Svelte
<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>
|