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

<script>
  import ActivityIcon from "./ActivityIcon"

  export let header = "";
  export let icon = null;
</script>

<div class="boi">
  <div class="boi-header">
    {#if (icon !== null)}<ActivityIcon name={icon} />{/if}{header}
  </div>
  <div class="boi-content">
    <slot></slot>
  </div>
</div>

<style>
  div.boi {
    margin: auto;
    max-width: 100%;

    background-color: #222;
    margin: 1em 0;

    box-shadow: 0.1em 0.1em 0.05em #080808;
  }

  div.boi > div.boi-header {
    background-color: #292929;
    color: #aaa;
    text-align: center;
    font-size: 1.25em;
    padding: 0.25em 0;
  }

  div.boi > div.boi-header > :global(.activity-icon) {
    position: relative;
    top: 0.125em;
    margin-right: 0.5ch;
  }
</style>