AzuTear
52 lines
2.1 KiB
Vue
52 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { AdminNominationReviewItem } from '../../types/awards'
|
|
|
|
defineProps<{
|
|
nominations: AdminNominationReviewItem[]
|
|
totalPending: number
|
|
selectedNominationId: number | null
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
select: [nominationId: number]
|
|
}>()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="space-y-2 xl:max-h-[680px] xl:overflow-y-auto xl:pr-2">
|
|
<button
|
|
v-for="nomination in nominations"
|
|
:key="nomination.id"
|
|
type="button"
|
|
class="w-full rounded-2xl border p-3 text-left transition"
|
|
:class="selectedNominationId === nomination.id ? 'border-violet-200 bg-violet-50/80 shadow-[0_12px_30px_rgba(168,145,214,0.12)]' : 'border-violet-100 bg-white/85 hover:border-violet-200 hover:bg-violet-50/50'"
|
|
@click="emit('select', nomination.id)"
|
|
>
|
|
<div class="flex items-start justify-between gap-3">
|
|
<div class="min-w-0">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<span class="rounded-full bg-violet-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-violet-700">
|
|
{{ nomination.categoryName }}
|
|
</span>
|
|
<span class="rounded-full bg-slate-50 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.14em] text-slate-600">
|
|
ID {{ nomination.id }}
|
|
</span>
|
|
</div>
|
|
<h3 class="mt-2 truncate text-base font-semibold text-slate-900">{{ nomination.candidateText || nomination.streamUrl || 'Name im Review festlegen' }}</h3>
|
|
<p class="mt-1 truncate text-sm text-slate-500">
|
|
{{ nomination.submittedByTwitchId }} · {{ new Date(nomination.createdAt).toLocaleString('de-DE') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
<p v-if="totalPending === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
|
|
Keine offenen Review-Fälle im aktuell gewählten Award-Jahr.
|
|
</p>
|
|
<p v-else-if="nominations.length === 0" class="rounded-[22px] border border-dashed border-violet-100 px-5 py-6 text-sm text-slate-500">
|
|
Keine Review-Fälle passen zum aktuellen Filter.
|
|
</p>
|
|
|
|
</div>
|
|
</template>
|