<script>
  export let activeTool = "pan";

  const tools = ["pan", "brush", "erasor", "polygon"];
</script>

{#each tools as t}
  <button on:click={() => (activeTool = t)} class:active={activeTool === t}>
    {t}
  </button>
{/each}

<style>
  button.active {
    background-color: red;
  }

  button {
    width: 80%;
    margin-left: 10%;
    margin-bottom: 5px;
    text-overflow: clip;
    text-align: center;
    overflow: hidden;
  }
</style>
