52 lines
1.8 KiB
Vue
52 lines
1.8 KiB
Vue
<script setup>
|
|
definePageMeta({
|
|
layout: 'admin'
|
|
})
|
|
|
|
const { data: posts } = await useFetch('/admin/api/posts', {
|
|
default: () => []
|
|
})
|
|
|
|
const publishedCount = computed(() => posts.value.filter((post) => post.status === 'published').length)
|
|
const draftCount = computed(() => posts.value.filter((post) => post.status === 'draft').length)
|
|
</script>
|
|
|
|
<template>
|
|
<section class="admin-dashboard">
|
|
<div class="admin-dashboard__header border-b border-line bg-paper p-6">
|
|
<p class="admin-dashboard__eyebrow text-xs font-semibold uppercase text-muted">
|
|
Admin
|
|
</p>
|
|
<h1 class="admin-dashboard__title mt-2 text-3xl font-semibold">
|
|
대시보드
|
|
</h1>
|
|
</div>
|
|
<div class="admin-dashboard__body grid gap-4 bg-paper p-6 text-sm text-muted md:grid-cols-3">
|
|
<section class="admin-dashboard__metric border border-line bg-white p-4">
|
|
<p class="admin-dashboard__metric-label text-xs font-semibold uppercase">
|
|
Posts
|
|
</p>
|
|
<strong class="admin-dashboard__metric-value mt-2 block text-3xl text-ink">
|
|
{{ posts.length }}
|
|
</strong>
|
|
</section>
|
|
<section class="admin-dashboard__metric border border-line bg-white p-4">
|
|
<p class="admin-dashboard__metric-label text-xs font-semibold uppercase">
|
|
Published
|
|
</p>
|
|
<strong class="admin-dashboard__metric-value mt-2 block text-3xl text-ink">
|
|
{{ publishedCount }}
|
|
</strong>
|
|
</section>
|
|
<section class="admin-dashboard__metric border border-line bg-white p-4">
|
|
<p class="admin-dashboard__metric-label text-xs font-semibold uppercase">
|
|
Draft
|
|
</p>
|
|
<strong class="admin-dashboard__metric-value mt-2 block text-3xl text-ink">
|
|
{{ draftCount }}
|
|
</strong>
|
|
</section>
|
|
</div>
|
|
</section>
|
|
</template>
|