stufflog2/svelte-ui/src/components/Boi.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 disabled: boolean = false;
  export let compact: boolean = false;
  export let compacter: boolean = false;
  export let tiny: boolean = false;

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

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

<div class="boi" class:disabled class:compact class:compacter class:tiny on:click={handleClick}><slot></slot></div>

<style>
  div.boi {
    border: 6px dashed;
    padding: 0.5em;
    margin: 1em 0.5ch;
    text-align: center;
    color: #777;
    border-color: #333;
    cursor: pointer;
    border-bottom-right-radius: 0.25em;
    font-size: 2em;
    -webkit-user-select: none;
    -moz-user-select: none;
  }
  div.boi:hover {
    color: #AAA;
    border-color: #444;
  }

  div.boi.disabled {
    color: #333;
    border-color: #222;
    cursor: wait;
  }

  div.boi.compact {
    margin: 0;
    border-width: 4px;
    padding: 0.25em;
  }

  div.boi.compacter {
    font-size: 1em;
    margin: 0 1ch;
    border-width: 3px;
    padding: 0.25em;
  }

  div.boi.tiny {
    display: inline-block;
    margin: auto;
    font-size: 1em;
    border-width: 3px;
  }
</style>