<template>
  <toolbar-component pageTitle="Boats" />
  <q-page>
    <boat-preview-component :boats="boats" />
  </q-page>
</template>

<script lang="ts" setup>
import BoatPreviewComponent from 'src/components/boat/BoatPreviewComponent.vue';
import { onMounted } from 'vue';
import { useBoatStore } from 'src/stores/boat';
import ToolbarComponent from 'src/components/ToolbarComponent.vue';
import { storeToRefs } from 'pinia';

const boatStore = useBoatStore();
const { boats } = storeToRefs(boatStore);

onMounted(() => boatStore.fetchBoats());
</script>
