signet-frontend/src/views/HomeView.vue

<template>
  <div>
    <section class="layout-section">
      <div class="container-grid" v-if="rewardFunds">
        <template v-for="fund in rewardFunds" :key="fund.id">
          <RouterLink :to="`/fund/${fund.id}`">
            <FundLink :fund="fund"/>
          </RouterLink>
        </template>
      </div>
      <div v-else>
        <div class="has-text-centered is-size-4">
          No group funds yet!
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import FundLink from '@/components/FundLink.vue';
import { getRewardFunds } from '@/api/composed';

const offset = ref(0);

const response = await getRewardFunds(offset.value);
if (!response) throw new Error('Could not get reward funds');
const {
  total,
  rewardFunds,
} = response;
offset.value = total;
</script>

<style scoped lang="stylus">
.container-grid
  display grid
  grid-template-columns: repeat(2, 1fr)
  gap: 10px
  grid-auto-rows: 120px

a
  text-decoration none

@media screen and (max-width: 680px)
  .container-grid
    display flex
    flex-direction column
</style>