Build & Deploy / build (push) Successful in 8s
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
31 lines
1.6 KiB
Vue
31 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
definePageMeta({ middleware: 'auth' })
|
|
const { t } = useI18n()
|
|
const { api } = useApi()
|
|
|
|
interface Routine { id: number, name: string, description: string | null, estimated_minutes: number | null, exercises?: unknown[] }
|
|
const { data, pending } = await useAsyncData('routines', () => api<{ data: Routine[] }>('/api/routines'), { lazy: true })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="text-2xl font-black tracking-tight">{{ t('nav.routines') }}</h1>
|
|
<UButton to="/routines/new" icon="i-lucide-plus" color="primary" size="sm" :label="t('routines.new')" />
|
|
</div>
|
|
<div v-if="pending && !data" class="flex justify-center py-16"><SfLogo :size="56" loader /></div>
|
|
<p v-else-if="!data?.data.length" class="text-center text-zinc-400 py-16">{{ t('routines.none') }}</p>
|
|
<div v-else class="space-y-2">
|
|
<UCard v-for="r in data.data" :key="r.id" :ui="{ body: 'p-3' }" class="cursor-pointer hover:border-flame-400 transition-colors" @click="navigateTo(`/routines/${r.id}`)">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<div class="min-w-0">
|
|
<p class="font-semibold truncate">{{ r.name }}</p>
|
|
<p class="text-xs text-zinc-500">{{ (r.exercises?.length ?? 0) }} {{ t('routines.exercises') }}<span v-if="r.estimated_minutes"> · ~{{ r.estimated_minutes }} min</span></p>
|
|
</div>
|
|
<UButton icon="i-lucide-play" color="primary" variant="soft" size="sm" @click.stop="navigateTo(`/session/new?routine=${r.id}`)" />
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</div>
|
|
</template>
|