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

<script lang="ts">
  import type Item from "../models/item";
  import Icon from "./Icon.svelte";

  export let item: Item = null;
  export let amount: number = null;
  export let noPadding: boolean = false;
</script>

<div class="item" class:noPadding>
  {#if amount != null}
    <div class="item-amount">{amount}x</div>
  {/if}
  <div class="item-icon">
    <Icon name={item.icon} />
  </div>
  <div class="item-name">
    <a href="/items#{item.groupId}">
      <span>{item.name}</span>
      {#if item.groupWeight !== 1}
        <span>({item.groupWeight})</span>
      {/if}
    </a>
  </div>
</div>

<style>
  div.item {
    display: flex;
    flex-direction: row;
    margin-top: 0.25em;
    margin-bottom: 0em;
    font-size: 0.75em;
  }
  a {
    color: inherit;
  }
  div.item-icon {
    padding: 0.25em 0.5ch 0.25em 0;
  }
  div.item-name {
    padding: 0.125em;
  }
  div.item-amount {
    padding: 0.125em;
    padding-right: 1ch;
  }

  div.item.noPadding {
    margin-top: 0em;
  }
</style>