stufflog/svelte-ui/src/components/AddBoi.svelte

<script>
  import Icon from 'fa-svelte'
  import { faPlus } from '@fortawesome/free-solid-svg-icons/faPlus'

  export let top = false;
</script>

<div on:click class="addboi" class:top>
  <Icon class="addboi-icon" icon={faPlus} />
  <slot></slot>
</div>

<style>
  div.addboi {
    margin: 0.5em 0 4em 0;
    padding: 1em 0;
    text-align: center;
    border: 4px dotted;

    color: #333;
    font-size: 2em;
    font-weight: 100;

    cursor: pointer;
    
    transition: 250ms;
  }
  div.addboi.top {
    margin-bottom: 0.5em;
    padding: 0.25em 0;
    font-size: 1.5em;
  }

  div.addboi:hover {
    color: #777;

    transition: 250ms;
  }

  div.addboi > :global(.addboi-icon) {
    position: relative;
    top: 0.125em;
  }
</style>