stufflog2/svelte-ui/src/components/ChildEntry.svelte

<script lang="ts">
  import type { IconName, iconNames } from "../external/icons";
  import DaysLeft from "./DaysLeft.svelte";
  import Icon from "./Icon.svelte";
  import LinkHook from "./LinkHook.svelte";
  import Markdown from "./Markdown.svelte";

  interface EntryCommon {
    id: string
    name?: string
    description: string
    icon?: IconName

    startTime?: string
    endTime?: string
    createdTime?: string

    active?: boolean
    completedAmount?: number
    itemAmount?: number
    task?: EntryCommonSub
  }
  
  interface EntryCommonSub {
    name: string
    icon: IconName
  }

  export let entry: EntryCommon = null;

  let iconName: IconName;
  let displayName: string;

  $: iconName = entry.task?.icon || entry.icon;
  $: displayName = entry.name || entry.task?.name || "";
</script>

<div class="child-entry">
  <LinkHook id={entry.id} />
  <div class="body">
    <div class="header">
      <slot name="icon">
        <div class="icon">
          <Icon name={iconName} />
        </div>
      </slot>
      <div class="name">{displayName}</div>
      {#if (entry.endTime != null)}
        <div class="times">
          <DaysLeft startTime={entry.startTime || entry.createdTime} endTime={entry.endTime} />
        </div>
      {/if}
    </div>
    <div class="entry-body">
      <Markdown source={entry.description} />
      <slot></slot>
    </div>
  </div>
</div>

<style>
  div.child-entry {
    display: flex;
    flex-direction: row;
    margin: 0.25em 0 0.75em 0;
  }
  div.icon {
    display: flex;
    flex-direction: column;
    font-size: 1em;
    padding: 0.2em .5ch;

    margin-right: 0.5em;
    background: #444;
    color: #CCC;
  }

  div.body {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  div.header {
    display: flex;
    flex-direction: row;
    background: #333;
  }

  div.name {
    font-size: 1em;
    font-weight: 100;
    margin: auto 0;
    vertical-align: middle;
    padding: 0.125em .5ch;
  }
  div.times {
    margin-left: auto; 
    margin-right: 0.25ch;
    padding: 0.125em 0;
  }

  div.entry-body {
    padding: 0.25em 1ch;
    background: #222;
    color: #aaa;
    border-bottom-right-radius: 0.5em;
  }
</style>