73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
|
<script setup>
|
|||
|
|
import AuroraCard from '../components/AuroraCard.vue';
|
|||
|
|
import StatRow from '../components/StatRow.vue';
|
|||
|
|
|
|||
|
|
const props = defineProps({ data: { type: Object, default: () => ({}) } });
|
|||
|
|
|
|||
|
|
const statusLabel = (s) =>
|
|||
|
|
({ publish: 'Published', draft: 'Draft', future: 'Scheduled' }[s] || s);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<AuroraCard title="Recent content" subtitle="Latest content activity">
|
|||
|
|
<template #head-right>
|
|||
|
|
<span class="dot dot--accent" /> {{ data.total || 0 }} total
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<StatRow
|
|||
|
|
:stats="[
|
|||
|
|
{ value: data.published || 0, label: 'Published' },
|
|||
|
|
{ value: data.draft || 0, label: 'Draft' },
|
|||
|
|
{ value: data.scheduled || 0, label: 'Scheduled' },
|
|||
|
|
]"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<ul class="rc__list">
|
|||
|
|
<li v-for="p in data.latest" :key="p.id" class="rc__item">
|
|||
|
|
<div class="rc__main">
|
|||
|
|
<a :href="p.editUrl" class="rc__title">{{ p.title || '(no title)' }}</a>
|
|||
|
|
<div class="rc__meta">{{ p.author }} · {{ p.date }}</div>
|
|||
|
|
</div>
|
|||
|
|
<span class="rc__badge" :class="`rc__badge--${p.status}`">
|
|||
|
|
{{ statusLabel(p.status) }}
|
|||
|
|
</span>
|
|||
|
|
</li>
|
|||
|
|
<li v-if="!data.latest || !data.latest.length" class="rc__empty">No content yet.</li>
|
|||
|
|
</ul>
|
|||
|
|
|
|||
|
|
<template #footer>
|
|||
|
|
<a :href="data.listUrl" class="viewall">View all ›</a>
|
|||
|
|
</template>
|
|||
|
|
</AuroraCard>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.rc__list { list-style: none; margin: 16px 0 0; padding: 0; }
|
|||
|
|
.rc__item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 12px;
|
|||
|
|
padding: 8px 0;
|
|||
|
|
}
|
|||
|
|
.rc__title {
|
|||
|
|
color: var(--aurora-text);
|
|||
|
|
text-decoration: none;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
.rc__title:hover { color: var(--aurora-accent); }
|
|||
|
|
.rc__meta { font-size: 0.75rem; color: var(--aurora-text-muted); margin-top: 2px; }
|
|||
|
|
.rc__badge {
|
|||
|
|
font-size: 0.6875rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
padding: 2px 8px;
|
|||
|
|
border-radius: 999px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
.rc__badge--publish { color: #34d399; }
|
|||
|
|
.rc__badge--future { color: var(--aurora-accent); }
|
|||
|
|
.rc__badge--draft { color: var(--aurora-text-muted); }
|
|||
|
|
.rc__empty { font-size: 0.8125rem; color: var(--aurora-text-muted); padding: 12px 0; }
|
|||
|
|
</style>
|