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"};
  export let color: "red" | "green" | "blue" | "yellow" | "purple" | undefined = undefined;
  export let disabled: boolean = false;

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

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

<div on:click={handleClick} class={`option ${color}`} class:disabled><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;
  }

  div.option.green {
    color: #484;
  }
  div.option.green:hover {
    color: #78ff78;
  }

  div.option.red {
    color: #852a24;
  }
  div.option.red:hover {
    color: #ff4545;
  }

  div.option.blue {
    color: #446d88;
  }
  div.option.blue:hover {
    color: #78c9ff;
  }

  div.option.yellow {
    color: #7a7429;
  }
  div.option.yellow:hover {
    color: #e7e55e;
  }

  div.option.purple {
    color: #7a2973;
  }
  div.option.purple:hover {
    color: #e75ed0;
  }

  div.option.disabled {
    opacity: 0.5;
  }
</style>