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

<script>
  import ActivityIcon from "./ActivityIcon.svelte";

  export let activity = null
  export let subActivity = null
</script>

{#if activity != null && !activity.deleted}
  <div class="icon"><ActivityIcon name={activity.icon} /></div>
  <span class="name">{activity.name}{(subActivity && !subActivity.deleted) ? " " + subActivity.name : ""}</span>
{:else}
  <div class="icon unknown"><ActivityIcon name="question" /></div>
  <span class="name unknown">(Unknown)</span>
{/if}

<style>
  div.icon {
    position: relative;
    top: 0.175em;
    display: inline-block;
  }

  div.unknown, span.unknown {
    color: #555;
  }
</style>