26 lines
711 B
Vue
26 lines
711 B
Vue
<script setup lang="ts">
|
|
import type { Boat } from '~/utils/boat.types';
|
|
|
|
defineProps({ boats: Array<Boat> });
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="boats" class="row">
|
|
<q-card
|
|
v-for="boat in boats"
|
|
:key="boat.$id"
|
|
class="q-ma-sm col-xs-12 col-sm-6 col-xl-3">
|
|
<q-card-section>
|
|
<q-img :src="boat.imgSrc" :fit="'scale-down'">
|
|
<div class="row absolute-top">
|
|
<div class="col text-h6 text-left">{{ boat.name }}</div>
|
|
<div class="col text-right">{{ boat.class }}</div>
|
|
</div>
|
|
</q-img>
|
|
</q-card-section>
|
|
<q-separator />
|
|
</q-card>
|
|
</div>
|
|
<div v-else><q-card>Sorry, no boats to show you!</q-card></div>
|
|
</template>
|