AzuTear
58 lines
1.9 KiB
Vue
58 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
import Button from '../components/ui/Button.vue'
|
|
import Card from '../components/ui/Card.vue'
|
|
import { useAwardsStore } from '../stores/awards'
|
|
|
|
const store = useAwardsStore()
|
|
const years = [2025, 2024, 2023, 2022]
|
|
const activeYear = ref(2025)
|
|
|
|
onMounted(async () => {
|
|
await store.loadHomeData()
|
|
await store.loadArchive(activeYear.value)
|
|
})
|
|
|
|
async function selectYear(year: number) {
|
|
activeYear.value = year
|
|
await store.loadArchive(year)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-10 pb-14">
|
|
<div class="space-y-4">
|
|
<p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Gewinnerarchiv</p>
|
|
<h1 class="max-w-[12ch] font-[Cormorant_Garamond] text-6xl leading-[0.92] text-violet-800">Jahre, Gewinner und Show-Historie</h1>
|
|
<p class="max-w-3xl text-lg leading-8 text-slate-600">
|
|
Das Archiv macht Awards dauerhaft sichtbar und verlinkbar. Kategorien und Banner bleiben pro Jahr nachvollziehbar.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex flex-wrap gap-3">
|
|
<Button
|
|
v-for="year in years"
|
|
:key="year"
|
|
:variant="activeYear === year ? 'default' : 'ghost'"
|
|
@click="selectYear(year)"
|
|
>
|
|
{{ year }}
|
|
</Button>
|
|
</div>
|
|
|
|
<div class="grid gap-5 lg:grid-cols-3">
|
|
<Card
|
|
v-for="item in store.archive.items"
|
|
:key="`${store.archive.year}-${item.category}`"
|
|
class="p-7"
|
|
>
|
|
<p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">{{ store.archive.year }}</p>
|
|
<h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ item.category }}</h2>
|
|
<p class="mt-4 text-lg font-semibold text-slate-800">{{ item.winnerName }}</p>
|
|
<p class="mt-1 text-sm text-slate-500">{{ item.winnerSlug }}</p>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</template>
|