harvester-ui-extension/pkg/harvester/components/MappingsCell.vue

<script setup>
defineProps({
  networkEntries: {
    type:    Array,
    default: () => [],
  },
  storageEntries: {
    type:    Array,
    default: () => [],
  },
});
</script>

<template>
  <div class="mappings-cell">
    <div
      v-for="(entry, idx) in networkEntries"
      :key="'net-' + idx"
      class="mapping-entry"
    >
      <i
        class="icon icon-network"
        aria-hidden="true"
      />
      <span>{{ entry }}</span>
    </div>
    <div
      v-for="(entry, idx) in storageEntries"
      :key="'stor-' + idx"
      class="mapping-entry"
    >
      <i
        class="icon icon-datastore"
        aria-hidden="true"
      />
      <span>{{ entry }}</span>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  .mappings-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .mapping-entry {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);

    .icon {
      font-size: 16px;
    }
  }
</style>