stufflog2/svelte-ui/src/components/Option.svelte

<script lang="ts">
  import { createEventDispatcher } from "svelte";
  import type { ModalData } from "../stores/modal";
  import modalStore from "../stores/modal";
  
  export let open: ModalData = {name: "none"};

  const dispatch = createEventDispatcher();
  
  function handleClick() {
    dispatch("click", {open});

    if (open.name !== "none") {
      modalStore.set(open);
    }
  }
</script>

<div on:click={handleClick} class="option"><slot></slot></div>

<style>
  div.option {
    display: inline-block;
    font-size: 0.9em;
    padding: 0.125em 0.75ch;
    cursor: pointer;
    color: #aa8822;

    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
  }

  div.option:hover {
    color: #FC1;
    text-decoration: underline;
  }
</style>