va-project/stockingly-frontend/src/views/Home.vue

<template>
  <v-container class="fill-height">
    <v-row>
      <template v-if="loading" v-for="i in Array.from({ length: 10 }, (_, i) => i)" :key="i">
        <v-col cols="12" md="6" lg="4">
          <v-skeleton-loader class="mx-auto" type="card"></v-skeleton-loader>
        </v-col>
      </template>
      <template v-else v-for="company in companies" :key="company.ticker">
        <v-col cols="12" md="6" lg="4">
          <v-card class="ma-1 fill-height">
            <v-card-item>
              <v-card-title>{{ company['short name'] }}</v-card-title>
              <v-card-subtitle>{{ company['company name'] }}</v-card-subtitle>
            </v-card-item>

            <v-card-text>
              {{ company.description }}
            </v-card-text>

            <div class="px-4">
              <v-chip label color="pink" class="ma-1">
                <v-icon start icon="mdi-chart-timeline-variant"></v-icon>
                {{ company.ticker }}
              </v-chip>
              <v-chip label color="green" class="ma-1">
                <v-icon start icon="mdi-currency-usd"></v-icon>
                {{ formatCurrency(company['market cap']) }}
              </v-chip>
              <template v-for="tag in company.tags" :key="tag">
                <v-chip label class="ma-1">{{ tag }}</v-chip>  
              </template>
            </div>
          </v-card>
        </v-col>
      </template>
    </v-row>
  </v-container>
</template>

<script lang="ts" setup>
import { getCompanies, Company } from '@/api';
import { ref, reactive } from 'vue';

const loading = ref(true);
const companies = reactive<Company[]>([]);

getCompanies().then(cs => {
  loading.value = false;
  companies.push(...cs);
});

const formatCurrency = (d: number) => {
  if (d < 1000) return `${d}`;
  if (d < 1_000_000) return `${Math.round(d / 1000)} K`;
  if (d < 1_000_000_000) return `${Math.round(d / 1_000_000)} M`
  return `${Math.round(d / 1_000_000_000)} B`
}
</script>