open-consul/ui/packages/consul-peerings/app/components/consul/peer/bento-box/index.hbs

<Hds::Card::Container @level="base" @hasBorder={{true}} class="mt-6 mb-3">
  <div class="flex h-24 p-6 overflow-x-auto space-x-12">
    <div class="shrink-0">
      <div
        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
      >Status</div>
      <div class="flex items-center">
        <Peerings::Badge @peering={{@peering}} />
      </div>
    </div>
    <div class="shrink-0">
      <div
        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
      >Latest heartbeat</div>
      <div class="flex items-center">
        {{#if @peering.LastHeartbeat}}
          {{#let (smart-date-format @peering.LastHeartbeat) as |smartDate|}}
            <FlightIcon
              @name="activity"
              class="mr-0.5 text-hds-foreground-faint fill-current"
            />
            {{#if smartDate.isNearDate}}
              <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
            {{else}}
              <span>{{smartDate.friendly}}</span>
            {{/if}}
          {{/let}}
        {{else}}
          <span>None yet</span>
        {{/if}}
      </div>
    </div>
    <div class="shrink-0">
      <div
        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foregrouny-primary"
      >Latest receipt</div>
      <div class="flex items-center">
        {{#if @peering.LastReceive}}
          {{#let (smart-date-format @peering.LastReceive) as |smartDate|}}
            {{#if smartDate.isNearDate}}
              <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
            {{else}}
              <span>{{smartDate.friendly}}</span>
            {{/if}}
          {{/let}}
        {{else}}
          <span>None yet</span>
        {{/if}}
      </div>
    </div>
    <div class="shrink-0">
      <div
        class="mb-2 hds-typography-body-200 hds-font-weight-semibold text-hds-foreground-primary"
      >Latest send</div>
      <div class="flex items-center">
        {{#if @peering.LastSend}}
          {{#let (smart-date-format @peering.LastSend) as |smartDate|}}
            {{#if smartDate.isNearDate}}
              <span {{tooltip smartDate.friendly}}>{{smartDate.relative}}</span>
            {{else}}
              <span>{{smartDate.friendly}}</span>
            {{/if}}
          {{/let}}
        {{else}}
          <span>None yet</span>
        {{/if}}
      </div>

    </div>
  </div>
</Hds::Card::Container>