36 lines
1.7 KiB
JavaScript
36 lines
1.7 KiB
JavaScript
import React from 'react'
|
|
import { usePage } from '@inertiajs/react'
|
|
import StudioLayout from '../../Layouts/StudioLayout'
|
|
import StudioContentBrowser from '../../Components/Studio/StudioContentBrowser'
|
|
|
|
export default function StudioStories() {
|
|
const { props } = usePage()
|
|
const summary = props.summary || {}
|
|
|
|
return (
|
|
<StudioLayout title={props.title} subtitle={props.description}>
|
|
<div className="mb-6 grid gap-4 md:grid-cols-4">
|
|
{[
|
|
['Stories', summary.count, 'fa-solid fa-feather-pointed'],
|
|
['Drafts', summary.draft_count, 'fa-solid fa-file-pen'],
|
|
['Published', summary.published_count, 'fa-solid fa-sparkles'],
|
|
].map(([label, value, icon]) => (
|
|
<div key={label} className="rounded-[24px] border border-white/10 bg-white/[0.03] p-5">
|
|
<div className="flex items-center gap-3 text-slate-300">
|
|
<i className={icon} />
|
|
<span className="text-sm">{label}</span>
|
|
</div>
|
|
<div className="mt-3 text-3xl font-semibold text-white">{Number(value || 0).toLocaleString()}</div>
|
|
</div>
|
|
))}
|
|
|
|
<a href={props.dashboardUrl} className="rounded-[24px] border border-sky-300/20 bg-sky-300/10 p-5 text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.2em]">Story dashboard</p>
|
|
<p className="mt-3 text-sm leading-6">Jump into the existing story workspace when you need the full editor and publishing controls.</p>
|
|
</a>
|
|
</div>
|
|
|
|
<StudioContentBrowser listing={props.listing} quickCreate={props.quickCreate} hideModuleFilter />
|
|
</StudioLayout>
|
|
)
|
|
} |