Files

43 lines
2.0 KiB
JavaScript

import React from 'react'
import { Head, Link } from '@inertiajs/react'
import AdminLayout from '../../../Layouts/AdminLayout'
function StatCard({ label, value }) {
return (
<div className="rounded-2xl border border-white/[0.08] bg-white/[0.04] p-5">
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">{label}</p>
<p className="mt-3 text-3xl font-bold text-white">{value.toLocaleString()}</p>
</div>
)
}
export default function AcademyDashboard({ stats, links }) {
return (
<AdminLayout title="Academy Dashboard" subtitle="Overview of Academy content, challenge activity, and future billing placeholders.">
<Head title="Admin · Academy Dashboard" />
<div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
<StatCard label="Courses" value={stats.courses} />
<StatCard label="Lessons" value={stats.lessons} />
<StatCard label="Prompts" value={stats.prompts} />
<StatCard label="Prompt Packs" value={stats.packs} />
<StatCard label="Challenges" value={stats.challenges} />
<StatCard label="Submissions" value={stats.submissions} />
<StatCard label="Badges" value={stats.badges} />
<StatCard label="Creator Subscribers" value={stats.creator_subscribers} />
<StatCard label="Pro Subscribers" value={stats.pro_subscribers} />
</div>
<div className="mt-8 rounded-[28px] border border-white/[0.08] bg-white/[0.03] p-6">
<p className="text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Modules</p>
<div className="mt-4 grid gap-3 md:grid-cols-2 xl:grid-cols-3">
{Object.entries(links).map(([key, href]) => (
<Link key={key} href={href} className="rounded-2xl border border-white/[0.08] bg-black/20 px-4 py-4 text-sm font-semibold text-white transition hover:border-white/15 hover:bg-white/[0.05]">
{key.replaceAll('_', ' ')}
</Link>
))}
</div>
</div>
</AdminLayout>
)
}