58 lines
3.4 KiB
JavaScript
58 lines
3.4 KiB
JavaScript
import React from 'react'
|
|
import { usePage } from '@inertiajs/react'
|
|
import StudioLayout from '../../Layouts/StudioLayout'
|
|
import StudioContentBrowser from '../../components/Studio/StudioContentBrowser'
|
|
|
|
function StatCard({ label, value, icon }) {
|
|
return (
|
|
<div className="rounded-[24px] border border-white/10 bg-white/[0.04] p-5 shadow-[0_20px_50px_rgba(2,6,23,0.18)]">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">{label}</div>
|
|
<div className="mt-3 flex items-center gap-3">
|
|
<span className="inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-sky-300/20 bg-sky-400/10 text-sky-100">
|
|
<i className={`fa-solid ${icon}`} />
|
|
</span>
|
|
<span className="text-3xl font-semibold tracking-[-0.04em] text-white">{value}</span>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function StudioCardsIndex() {
|
|
const { props } = usePage()
|
|
const summary = props.summary || {}
|
|
|
|
return (
|
|
<StudioLayout title={props.title} subtitle={props.description}>
|
|
<section className="rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.15),transparent_38%),linear-gradient(180deg,rgba(15,23,42,0.96),rgba(2,6,23,0.88))] p-6 shadow-[0_24px_70px_rgba(2,6,23,0.32)]">
|
|
<div className="flex flex-col gap-5 lg:flex-row lg:items-end lg:justify-between">
|
|
<div className="max-w-3xl">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.28em] text-sky-200/75">Creation surface</p>
|
|
<h2 className="mt-3 text-3xl font-semibold tracking-[-0.04em] text-white">Build quote cards, mood cards, and visual text art.</h2>
|
|
<p className="mt-3 text-sm leading-7 text-slate-300">Cards now live inside the same shared Creator Studio queue as artworks, collections, and stories, while keeping the dedicated editor and analytics flow.</p>
|
|
</div>
|
|
<div className="flex flex-wrap gap-3">
|
|
<a href="/studio/cards/create" className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/20 bg-sky-400/10 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">
|
|
<i className="fa-solid fa-plus" />
|
|
New card
|
|
</a>
|
|
<a href={props.publicBrowseUrl} className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]">
|
|
<i className="fa-solid fa-compass" />
|
|
Browse public cards
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="mt-6 grid gap-4 md:grid-cols-2 xl:grid-cols-4">
|
|
<StatCard label="All cards" value={summary.count || 0} icon="fa-layer-group" />
|
|
<StatCard label="Drafts" value={summary.draft_count || 0} icon="fa-file-lines" />
|
|
<StatCard label="Archived" value={summary.archived_count || 0} icon="fa-box-archive" />
|
|
<StatCard label="Published" value={summary.published_count || 0} icon="fa-earth-americas" />
|
|
</section>
|
|
|
|
<section className="mt-8">
|
|
<StudioContentBrowser listing={props.listing} quickCreate={props.quickCreate} hideModuleFilter emptyTitle="No cards yet" emptyBody="Create your first Nova card and it will appear here alongside your other Creator Studio content." />
|
|
</section>
|
|
</StudioLayout>
|
|
)
|
|
} |