cosmos-explorer/src/components/CardParameter.vue

<script lang="ts" setup>
import type { PropType } from 'vue';
import { useFormatter } from '@/stores';
const props = defineProps({
  cardItem: {
    type: Object as PropType<{ title: string; items: Array<any> }>,
  },
});

const formatter = useFormatter();
function calculateValue(value: any) {
  if (Array.isArray(value)) {
    return (value[0] && value[0].amount) || '-';
  }
  const newValue = Number(value);
  if (`${newValue}` === 'NaN' || typeof value === 'boolean') {
    return value;
  }

  if (newValue < 1 && newValue > 0) {
    return formatter.formatDecimalToPercent(value);
  }
  return newValue;
}
</script>
<template>
  <div
    class="bg-base-100 px-4 pt-3 pb-4 rounded mt-5"
    v-if="props.cardItem?.items && props.cardItem?.items?.length > 0"
  >
    <div class="text-base mb-3 text-main">{{ props.cardItem?.title }}</div>
    <div
      class="grid grid-cols-2 md:!grid-cols-4 lg:!grid-cols-5 2xl:!grid-cols-6 gap-4"
    >
      <div
        v-for="(item, index) of props.cardItem?.items"
        :key="index"
        class="rounded-sm bg-active px-4 py-2"
      >
        <div class="text-xs mb-2 text-secondary">{{ item?.subtitle }}</div>
        <div class="text-base text-main">{{ calculateValue(item?.value) }}</div>
      </div>
    </div>
  </div>
</template>