36 lines
1.2 KiB
Vue
36 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
const certifications = [
|
|
{ title: 'J/27 Skipper', badgeText: 'J/27', description: 'Certified to be a skipper on a J/27 class boat.' },
|
|
{ title: 'Capri 25 Skipper', badgeText: 'Capri25', description: 'Certified to be a skipper on a Capri 25 class boat.' },
|
|
{ title: 'Night', badgeText: 'Night', description: 'Certified to operate boats at night' },
|
|
{ title: 'Navigation', badgeText: 'Nav', description: 'Advanced Navigation' },
|
|
{ title: 'Crew', badgeText: 'crew', description: 'Crew certification.' },
|
|
];
|
|
</script>
|
|
|
|
<template>
|
|
<div>Certification</div>
|
|
<q-item
|
|
v-for="cert in certifications"
|
|
:key="cert.title"
|
|
clickable
|
|
v-ripple
|
|
class="rounded-borders"
|
|
:class="$q.dark.isActive ? 'bg-grey-9 text-white' : 'bg-grey-2'">
|
|
<q-item-section avatar>
|
|
<q-avatar rounded>
|
|
<q-icon :name="`check`" />
|
|
</q-avatar>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<q-item-label>{{ cert.title }}</q-item-label>
|
|
<q-item-label caption>
|
|
<q-badge color="green-4" text-color="black">{{ cert.badgeText }}</q-badge>
|
|
</q-item-label>
|
|
</q-item-section>
|
|
<q-item-section>
|
|
<span>{{ cert.description }}</span>
|
|
</q-item-section>
|
|
</q-item>
|
|
</template>
|