84 lines
4.3 KiB
JavaScript
84 lines
4.3 KiB
JavaScript
import React from 'react'
|
|
import { Link, usePage } from '@inertiajs/react'
|
|
import StudioLayout from '../../Layouts/StudioLayout'
|
|
|
|
const kpiItems = [
|
|
{ key: 'views', label: 'Views', icon: 'fa-eye', color: 'text-emerald-400' },
|
|
{ key: 'likes', label: 'Likes', icon: 'fa-heart', color: 'text-pink-400' },
|
|
{ key: 'saves', label: 'Saves', icon: 'fa-bookmark', color: 'text-amber-400' },
|
|
{ key: 'remixes', label: 'Remixes', icon: 'fa-code-branch', color: 'text-cyan-400' },
|
|
{ key: 'comments', label: 'Comments', icon: 'fa-comment', color: 'text-blue-400' },
|
|
{ key: 'challenge_entries', label: 'Challenges', icon: 'fa-trophy', color: 'text-violet-400' },
|
|
]
|
|
|
|
const secondaryItems = [
|
|
{ key: 'favorites', label: 'Favorites', icon: 'fa-star' },
|
|
{ key: 'shares', label: 'Shares', icon: 'fa-share-nodes' },
|
|
{ key: 'downloads', label: 'Downloads', icon: 'fa-download' },
|
|
]
|
|
|
|
export default function StudioCardAnalytics() {
|
|
const { props } = usePage()
|
|
const { card, analytics } = props
|
|
|
|
return (
|
|
<StudioLayout title={`Analytics: ${card?.title || 'Nova Card'}`}>
|
|
<Link href="/studio/cards" className="mb-6 inline-flex items-center gap-2 text-sm text-slate-400 transition-colors hover:text-white">
|
|
<i className="fa-solid fa-arrow-left" />
|
|
Back to Cards
|
|
</Link>
|
|
|
|
<div className="mb-8 flex items-center gap-4 rounded-2xl border border-white/10 bg-nova-900/60 p-4">
|
|
{card?.preview_url ? <img src={card.preview_url} alt={card.title} className="h-20 w-20 rounded-xl object-cover bg-nova-800" /> : null}
|
|
<div>
|
|
<h2 className="text-lg font-bold text-white">{card?.title}</h2>
|
|
<p className="mt-1 text-xs text-slate-500">/{card?.slug}</p>
|
|
<p className="mt-2 text-xs uppercase tracking-[0.18em] text-slate-400">{card?.status} • {card?.visibility}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-8 grid grid-cols-2 gap-4 sm:grid-cols-3 xl:grid-cols-6">
|
|
{kpiItems.map((item) => (
|
|
<div key={item.key} className="rounded-2xl border border-white/10 bg-nova-900/60 p-5">
|
|
<div className="mb-2 flex items-center gap-2">
|
|
<i className={`fa-solid ${item.icon} ${item.color}`} />
|
|
<span className="text-xs font-medium uppercase tracking-wider text-slate-400">{item.label}</span>
|
|
</div>
|
|
<p className="text-2xl font-bold tabular-nums text-white">{(analytics?.[item.key] ?? 0).toLocaleString()}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,0.9fr)]">
|
|
<div className="rounded-2xl border border-white/10 bg-nova-900/40 p-6">
|
|
<h3 className="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-slate-300">Ranking signals</h3>
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Trending score</div>
|
|
<div className="mt-2 text-3xl font-bold tabular-nums text-white">{Number(analytics?.trending_score ?? 0).toFixed(2)}</div>
|
|
</div>
|
|
<div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
|
|
<div className="text-xs uppercase tracking-[0.18em] text-slate-400">Last engaged</div>
|
|
<div className="mt-2 text-sm text-white">{analytics?.last_engaged_at || 'No activity yet'}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="rounded-2xl border border-white/10 bg-nova-900/40 p-6">
|
|
<h3 className="mb-4 text-sm font-semibold uppercase tracking-[0.18em] text-slate-300">Secondary metrics</h3>
|
|
<div className="space-y-3">
|
|
{secondaryItems.map((item) => (
|
|
<div key={item.key} className="flex items-center justify-between rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
|
|
<div className="flex items-center gap-2 text-sm text-slate-300">
|
|
<i className={`fa-solid ${item.icon} text-slate-500`} />
|
|
{item.label}
|
|
</div>
|
|
<div className="text-base font-semibold tabular-nums text-white">{(analytics?.[item.key] ?? 0).toLocaleString()}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</StudioLayout>
|
|
)
|
|
} |