45 lines
1.5 KiB
Vue
45 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
const search = ref('')
|
|
const { years, errors } = useDiary(search)
|
|
const log = useLog()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto max-w-3xl">
|
|
<div class="mb-8 flex flex-wrap items-center justify-between gap-3">
|
|
<h1 class="text-2xl font-semibold text-highlighted">Diary</h1>
|
|
<div class="flex w-full items-center gap-2 sm:w-auto">
|
|
<UInput v-model="search" icon="i-lucide-search" placeholder="Search the diary" class="flex-1 sm:w-64 sm:flex-none" />
|
|
<UButton icon="i-lucide-plus" label="Log" @click="log.show()" />
|
|
</div>
|
|
</div>
|
|
|
|
<UAlert
|
|
v-for="{ what, error } in errors"
|
|
:key="what"
|
|
color="error"
|
|
variant="subtle"
|
|
icon="i-lucide-triangle-alert"
|
|
:title="`Couldn't load your ${what}`"
|
|
:description="errorMessage(error)"
|
|
class="mb-6"
|
|
/>
|
|
|
|
<section v-for="group in years" :key="group.year" class="mb-10">
|
|
<header class="sticky top-0 z-10 mb-4 bg-default/90 py-2 backdrop-blur">
|
|
<h2 class="text-xl font-semibold text-highlighted tabular-nums">{{ group.year }}</h2>
|
|
</header>
|
|
|
|
<UTimeline :items="group.items" color="primary" size="md" :ui="{ wrapper: 'pb-6' }">
|
|
<template #wrapper="{ item }">
|
|
<DiaryEntry :key="item.value" :entry="item.entry" :search="search" />
|
|
</template>
|
|
</UTimeline>
|
|
</section>
|
|
|
|
<p v-if="!years.length && !errors.length" class="py-16 text-center text-muted">
|
|
{{ search ? 'Nothing in the diary matches your search.' : 'Nothing logged yet.' }}
|
|
</p>
|
|
</div>
|
|
</template>
|