Implement creator studio and upload updates
This commit is contained in:
597
resources/js/components/Studio/StudioContentBrowser.jsx
Normal file
597
resources/js/components/Studio/StudioContentBrowser.jsx
Normal file
@@ -0,0 +1,597 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { router } from '@inertiajs/react'
|
||||
import { studioSurface, trackStudioEvent } from '../../utils/studioEvents'
|
||||
|
||||
function formatDate(value) {
|
||||
if (!value) return 'Unscheduled'
|
||||
const date = new Date(value)
|
||||
if (Number.isNaN(date.getTime())) return 'Unscheduled'
|
||||
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
|
||||
}
|
||||
|
||||
function metricValue(item, key) {
|
||||
return Number(item?.metrics?.[key] ?? 0).toLocaleString()
|
||||
}
|
||||
|
||||
function readinessClasses(readiness) {
|
||||
if (!readiness) return 'border-white/15 bg-white/5 text-slate-300'
|
||||
if (readiness.can_publish && readiness.score >= readiness.max) return 'border-emerald-400/30 bg-emerald-400/10 text-emerald-100'
|
||||
if (readiness.can_publish) return 'border-sky-400/30 bg-sky-400/10 text-sky-100'
|
||||
return 'border-amber-400/30 bg-amber-400/10 text-amber-100'
|
||||
}
|
||||
|
||||
function statusClasses(status) {
|
||||
switch (status) {
|
||||
case 'published':
|
||||
return 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200'
|
||||
case 'draft':
|
||||
case 'pending_review':
|
||||
return 'border-amber-400/30 bg-amber-400/10 text-amber-100'
|
||||
case 'scheduled':
|
||||
case 'processing':
|
||||
return 'border-sky-400/30 bg-sky-400/10 text-sky-100'
|
||||
case 'archived':
|
||||
case 'hidden':
|
||||
case 'rejected':
|
||||
return 'border-white/15 bg-white/5 text-slate-300'
|
||||
default:
|
||||
return 'border-white/15 bg-white/5 text-slate-200'
|
||||
}
|
||||
}
|
||||
|
||||
function ActionLink({ href, icon, label, onClick }) {
|
||||
if (!href) return null
|
||||
|
||||
return (
|
||||
<a
|
||||
href={href}
|
||||
onClick={onClick}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-slate-200 transition hover:border-white/20 hover:bg-white/[0.06]"
|
||||
>
|
||||
<i className={`${icon} text-[11px]`} />
|
||||
<span>{label}</span>
|
||||
</a>
|
||||
)
|
||||
}
|
||||
|
||||
function RequestActionButton({ action, onExecute, busyKey }) {
|
||||
if (!action || action.type !== 'request') return null
|
||||
|
||||
const isBusy = busyKey === `${action.key}:${action.url}`
|
||||
|
||||
return (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onExecute(action)}
|
||||
disabled={isBusy}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-slate-200 transition hover:border-white/20 hover:bg-white/[0.06] disabled:cursor-not-allowed disabled:opacity-50"
|
||||
>
|
||||
<i className={`${action.icon} text-[11px]`} />
|
||||
<span>{isBusy ? 'Working...' : action.label}</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
function PreviewLink({ item }) {
|
||||
if (!item?.preview_url) return null
|
||||
|
||||
return <ActionLink href={item.preview_url} icon="fa-solid fa-eye" label="Preview" />
|
||||
}
|
||||
|
||||
function GridCard({ item, onExecuteAction, busyKey }) {
|
||||
const handleEditClick = () => {
|
||||
trackStudioEvent('studio_item_edited', {
|
||||
surface: studioSurface(),
|
||||
module: item.module,
|
||||
item_module: item.module,
|
||||
item_id: item.numeric_id,
|
||||
meta: {
|
||||
action: 'edit',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="overflow-hidden rounded-[28px] border border-white/10 bg-white/[0.03] shadow-[0_18px_50px_rgba(3,7,18,0.22)] transition hover:-translate-y-0.5 hover:border-white/20">
|
||||
<div className="relative aspect-[1.15/1] overflow-hidden bg-slate-950/70">
|
||||
{item.image_url ? (
|
||||
<img src={item.image_url} alt={item.title} className="h-full w-full object-cover" loading="lazy" />
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.18),_transparent_55%),linear-gradient(135deg,_rgba(15,23,42,0.9),_rgba(2,6,23,0.95))] text-slate-400">
|
||||
<i className={`${item.module_icon} text-3xl`} />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute left-4 top-4 inline-flex items-center gap-2 rounded-full border border-black/10 bg-black/45 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-white backdrop-blur-md">
|
||||
<i className={`${item.module_icon} text-[10px]`} />
|
||||
<span>{item.module_label}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-4 p-5">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0">
|
||||
<h3 className="truncate text-base font-semibold text-white">{item.title}</h3>
|
||||
<p className="mt-1 truncate text-sm text-slate-400">{item.subtitle || item.visibility || 'Untitled metadata'}</p>
|
||||
</div>
|
||||
<span className={`inline-flex shrink-0 items-center rounded-full border px-2.5 py-1 text-[11px] font-medium capitalize ${statusClasses(item.status)}`}>
|
||||
{String(item.status || 'unknown').replace('_', ' ')}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{item.workflow?.readiness && (
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className={`inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium ${readinessClasses(item.workflow.readiness)}`}>
|
||||
{item.workflow.readiness.label}
|
||||
</span>
|
||||
{item.workflow.is_stale_draft && (
|
||||
<span className="inline-flex items-center rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-[11px] font-medium text-amber-100">
|
||||
Stale draft
|
||||
</span>
|
||||
)}
|
||||
<span className="text-[11px] uppercase tracking-[0.16em] text-slate-500">
|
||||
{item.workflow.readiness.score}/{item.workflow.readiness.max} ready
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="line-clamp-2 min-h-[2.5rem] text-sm text-slate-300/90">
|
||||
{item.description || 'No description yet.'}
|
||||
</p>
|
||||
|
||||
{Array.isArray(item.workflow?.readiness?.missing) && item.workflow.readiness.missing.length > 0 && (
|
||||
<div className="rounded-2xl border border-white/5 bg-slate-950/35 p-3 text-xs text-slate-400">
|
||||
{item.workflow.readiness.missing.slice(0, 2).join(' • ')}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-3 gap-2 rounded-2xl border border-white/5 bg-slate-950/40 p-3 text-xs text-slate-400">
|
||||
<div>
|
||||
<div className="text-[10px] uppercase tracking-[0.16em]">Views</div>
|
||||
<div className="mt-1 text-sm font-semibold text-white">{metricValue(item, 'views')}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] uppercase tracking-[0.16em]">Reactions</div>
|
||||
<div className="mt-1 text-sm font-semibold text-white">{metricValue(item, 'appreciation')}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-[10px] uppercase tracking-[0.16em]">Comments</div>
|
||||
<div className="mt-1 text-sm font-semibold text-white">{metricValue(item, 'comments')}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 text-xs text-slate-500">
|
||||
<span>Updated {formatDate(item.updated_at)}</span>
|
||||
{item.published_at && <span>Published {formatDate(item.published_at)}</span>}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<ActionLink href={item.edit_url || item.manage_url} icon="fa-solid fa-pen-to-square" label="Edit" onClick={handleEditClick} />
|
||||
<PreviewLink item={item} />
|
||||
<ActionLink href={item.analytics_url} icon="fa-solid fa-chart-line" label="Analytics" />
|
||||
<ActionLink href={item.view_url} icon="fa-solid fa-arrow-up-right-from-square" label="Open" />
|
||||
{(item.actions || []).map((action) => (
|
||||
<RequestActionButton key={`${item.id}-${action.key}`} action={{ ...action, item_id: item.numeric_id, item_module: item.module }} onExecute={onExecuteAction} busyKey={busyKey} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{Array.isArray(item.workflow?.cross_module_actions) && item.workflow.cross_module_actions.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 border-t border-white/5 pt-3">
|
||||
{item.workflow.cross_module_actions.slice(0, 2).map((action) => (
|
||||
<ActionLink key={`${item.id}-${action.label}`} href={action.href} icon={action.icon} label={action.label} />
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
function ListRow({ item, onExecuteAction, busyKey }) {
|
||||
const handleEditClick = () => {
|
||||
trackStudioEvent('studio_item_edited', {
|
||||
surface: studioSurface(),
|
||||
module: item.module,
|
||||
item_module: item.module,
|
||||
item_id: item.numeric_id,
|
||||
meta: {
|
||||
action: 'edit',
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<article className="grid gap-4 rounded-[24px] border border-white/10 bg-white/[0.03] p-4 transition hover:border-white/20 md:grid-cols-[120px_minmax(0,1fr)_auto] md:items-center">
|
||||
<div className="h-24 overflow-hidden rounded-2xl bg-slate-950/60">
|
||||
{item.image_url ? (
|
||||
<img src={item.image_url} alt={item.title} className="h-full w-full object-cover" loading="lazy" />
|
||||
) : (
|
||||
<div className="flex h-full items-center justify-center text-slate-400">
|
||||
<i className={`${item.module_icon} text-2xl`} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="min-w-0">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-300">
|
||||
<i className={`${item.module_icon} text-[10px]`} />
|
||||
{item.module_label}
|
||||
</span>
|
||||
<span className={`inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium capitalize ${statusClasses(item.status)}`}>
|
||||
{String(item.status || 'unknown').replace('_', ' ')}
|
||||
</span>
|
||||
</div>
|
||||
<h3 className="mt-3 truncate text-lg font-semibold text-white">{item.title}</h3>
|
||||
<p className="mt-1 text-sm text-slate-400">{item.subtitle || item.visibility || 'Untitled metadata'}</p>
|
||||
<p className="mt-3 line-clamp-2 text-sm text-slate-300/90">{item.description || 'No description yet.'}</p>
|
||||
<div className="mt-3 flex flex-wrap gap-2">
|
||||
{item.workflow?.readiness && (
|
||||
<span className={`inline-flex items-center rounded-full border px-2.5 py-1 text-[11px] font-medium ${readinessClasses(item.workflow.readiness)}`}>
|
||||
{item.workflow.readiness.label}
|
||||
</span>
|
||||
)}
|
||||
{item.workflow?.is_stale_draft && (
|
||||
<span className="inline-flex items-center rounded-full border border-amber-400/30 bg-amber-400/10 px-2.5 py-1 text-[11px] font-medium text-amber-100">
|
||||
Stale draft
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="mt-3 flex flex-wrap gap-4 text-xs text-slate-500">
|
||||
<span>{metricValue(item, 'views')} views</span>
|
||||
<span>{metricValue(item, 'appreciation')} reactions</span>
|
||||
<span>{metricValue(item, 'comments')} comments</span>
|
||||
<span>Updated {formatDate(item.updated_at)}</span>
|
||||
</div>
|
||||
{Array.isArray(item.workflow?.readiness?.missing) && item.workflow.readiness.missing.length > 0 && (
|
||||
<div className="mt-3 text-xs text-slate-500">{item.workflow.readiness.missing.slice(0, 2).join(' • ')}</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap gap-2 md:justify-end">
|
||||
<ActionLink href={item.edit_url || item.manage_url} icon="fa-solid fa-pen-to-square" label="Edit" onClick={handleEditClick} />
|
||||
<PreviewLink item={item} />
|
||||
<ActionLink href={item.analytics_url} icon="fa-solid fa-chart-line" label="Analytics" />
|
||||
<ActionLink href={item.view_url} icon="fa-solid fa-arrow-up-right-from-square" label="Open" />
|
||||
{(item.actions || []).map((action) => (
|
||||
<RequestActionButton key={`${item.id}-${action.key}`} action={{ ...action, item_id: item.numeric_id, item_module: item.module }} onExecute={onExecuteAction} busyKey={busyKey} />
|
||||
))}
|
||||
{(item.workflow?.cross_module_actions || []).slice(0, 2).map((action) => (
|
||||
<ActionLink key={`${item.id}-${action.label}`} href={action.href} icon={action.icon} label={action.label} />
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
)
|
||||
}
|
||||
|
||||
function AdvancedFilterControl({ filter, onChange }) {
|
||||
if (filter.type === 'select') {
|
||||
return (
|
||||
<label className="space-y-2 text-sm text-slate-300">
|
||||
<span className="block text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">{filter.label}</span>
|
||||
<select
|
||||
value={filter.value || 'all'}
|
||||
onChange={(event) => onChange(filter.key, event.target.value)}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40 focus:bg-black/30"
|
||||
>
|
||||
{(filter.options || []).map((option) => (
|
||||
<option key={option.value} value={option.value} className="bg-slate-900">
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<label className="space-y-2 text-sm text-slate-300">
|
||||
<span className="block text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">{filter.label}</span>
|
||||
<input
|
||||
type="search"
|
||||
value={filter.value || ''}
|
||||
onChange={(event) => onChange(filter.key, event.target.value)}
|
||||
placeholder={filter.placeholder || filter.label}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none transition placeholder:text-slate-500 focus:border-sky-300/40 focus:bg-black/30"
|
||||
/>
|
||||
</label>
|
||||
)
|
||||
}
|
||||
|
||||
export default function StudioContentBrowser({
|
||||
listing,
|
||||
quickCreate = [],
|
||||
hideModuleFilter = false,
|
||||
hideBucketFilter = false,
|
||||
emptyTitle = 'Nothing here yet',
|
||||
emptyBody = 'Try adjusting filters or create something new.',
|
||||
}) {
|
||||
const [viewMode, setViewMode] = useState('grid')
|
||||
const [busyKey, setBusyKey] = useState(null)
|
||||
const filters = listing?.filters || {}
|
||||
const items = listing?.items || []
|
||||
const meta = listing?.meta || {}
|
||||
const advancedFilters = listing?.advanced_filters || []
|
||||
|
||||
useEffect(() => {
|
||||
const stored = window.localStorage.getItem('studio-content-view')
|
||||
if (stored === 'grid' || stored === 'list') {
|
||||
setViewMode(stored)
|
||||
return
|
||||
}
|
||||
|
||||
if (listing?.default_view === 'grid' || listing?.default_view === 'list') {
|
||||
setViewMode(listing.default_view)
|
||||
}
|
||||
}, [listing?.default_view])
|
||||
|
||||
const updateQuery = (patch) => {
|
||||
const next = {
|
||||
...filters,
|
||||
...patch,
|
||||
}
|
||||
|
||||
if (patch.page == null) {
|
||||
next.page = 1
|
||||
}
|
||||
|
||||
trackStudioEvent('studio_filter_used', {
|
||||
surface: studioSurface(),
|
||||
module: filters.module || listing?.module || null,
|
||||
meta: {
|
||||
patch,
|
||||
},
|
||||
})
|
||||
|
||||
router.get(window.location.pathname, next, {
|
||||
preserveScroll: true,
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
})
|
||||
}
|
||||
|
||||
const updateView = (nextMode) => {
|
||||
setViewMode(nextMode)
|
||||
window.localStorage.setItem('studio-content-view', nextMode)
|
||||
trackStudioEvent('studio_filter_used', {
|
||||
surface: studioSurface(),
|
||||
module: filters.module || listing?.module || null,
|
||||
meta: {
|
||||
view_mode: nextMode,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
const executeAction = async (action) => {
|
||||
if (!action?.url || action.type !== 'request') {
|
||||
return
|
||||
}
|
||||
|
||||
if (action.confirm && !window.confirm(action.confirm)) {
|
||||
return
|
||||
}
|
||||
|
||||
const requestKey = `${action.key}:${action.url}`
|
||||
setBusyKey(requestKey)
|
||||
|
||||
try {
|
||||
const response = await fetch(action.url, {
|
||||
method: String(action.method || 'post').toUpperCase(),
|
||||
credentials: 'same-origin',
|
||||
headers: {
|
||||
Accept: 'application/json',
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
|
||||
'X-Requested-With': 'XMLHttpRequest',
|
||||
},
|
||||
body: action.payload ? JSON.stringify(action.payload) : undefined,
|
||||
})
|
||||
|
||||
const payload = await response.json().catch(() => ({}))
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(payload?.message || payload?.error || 'Request failed')
|
||||
}
|
||||
|
||||
if (action.key === 'archive') {
|
||||
trackStudioEvent('studio_item_archived', {
|
||||
surface: studioSurface(),
|
||||
module: filters.module || null,
|
||||
item_module: action.item_module || null,
|
||||
item_id: action.item_id || null,
|
||||
meta: {
|
||||
action: action.key,
|
||||
url: action.url,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (action.key === 'restore') {
|
||||
trackStudioEvent('studio_item_restored', {
|
||||
surface: studioSurface(),
|
||||
module: filters.module || null,
|
||||
item_module: action.item_module || null,
|
||||
item_id: action.item_id || null,
|
||||
meta: {
|
||||
action: action.key,
|
||||
url: action.url,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
if (action.redirect_pattern && payload?.data?.id) {
|
||||
window.location.assign(action.redirect_pattern.replace('__ID__', String(payload.data.id)))
|
||||
return
|
||||
}
|
||||
|
||||
if (payload?.redirect) {
|
||||
window.location.assign(payload.redirect)
|
||||
return
|
||||
}
|
||||
|
||||
router.reload({ preserveScroll: true, preserveState: true })
|
||||
} catch (error) {
|
||||
window.alert(error?.message || 'Action failed.')
|
||||
} finally {
|
||||
setBusyKey(null)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<section className="rounded-[30px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.12),_transparent_35%),radial-gradient(circle_at_bottom_right,_rgba(56,189,248,0.12),_transparent_40%),linear-gradient(135deg,_rgba(15,23,42,0.86),_rgba(2,6,23,0.96))] p-5 shadow-[0_22px_60px_rgba(2,6,23,0.28)] lg:p-6">
|
||||
<div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-end">
|
||||
<div className={`grid gap-3 md:grid-cols-2 ${advancedFilters.length > 0 ? 'xl:grid-cols-5' : 'xl:grid-cols-4'}`}>
|
||||
<label className="space-y-2 text-sm text-slate-300">
|
||||
<span className="block text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Search</span>
|
||||
<input
|
||||
type="search"
|
||||
value={filters.q || ''}
|
||||
onChange={(event) => updateQuery({ q: event.target.value })}
|
||||
placeholder="Title, description, module"
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none transition placeholder:text-slate-500 focus:border-sky-300/40 focus:bg-black/30"
|
||||
/>
|
||||
</label>
|
||||
|
||||
{!hideModuleFilter && (
|
||||
<label className="space-y-2 text-sm text-slate-300">
|
||||
<span className="block text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Module</span>
|
||||
<select
|
||||
value={filters.module || 'all'}
|
||||
onChange={(event) => updateQuery({ module: event.target.value })}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40 focus:bg-black/30"
|
||||
>
|
||||
{(listing?.module_options || []).map((option) => (
|
||||
<option key={option.value} value={option.value} className="bg-slate-900">
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
|
||||
{!hideBucketFilter && (
|
||||
<label className="space-y-2 text-sm text-slate-300">
|
||||
<span className="block text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Status</span>
|
||||
<select
|
||||
value={filters.bucket || 'all'}
|
||||
onChange={(event) => updateQuery({ bucket: event.target.value })}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40 focus:bg-black/30"
|
||||
>
|
||||
{(listing?.bucket_options || []).map((option) => (
|
||||
<option key={option.value} value={option.value} className="bg-slate-900">
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
)}
|
||||
|
||||
<label className="space-y-2 text-sm text-slate-300">
|
||||
<span className="block text-[11px] font-semibold uppercase tracking-[0.2em] text-slate-500">Sort</span>
|
||||
<select
|
||||
value={filters.sort || 'updated_desc'}
|
||||
onChange={(event) => updateQuery({ sort: event.target.value })}
|
||||
className="w-full rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-white outline-none transition focus:border-sky-300/40 focus:bg-black/30"
|
||||
>
|
||||
{(listing?.sort_options || []).map((option) => (
|
||||
<option key={option.value} value={option.value} className="bg-slate-900">
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
|
||||
{advancedFilters.map((filter) => (
|
||||
<AdvancedFilterControl key={filter.key} filter={filter} onChange={(key, value) => updateQuery({ [key]: value })} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 lg:justify-end">
|
||||
<div className="inline-flex rounded-full border border-white/10 bg-black/20 p-1">
|
||||
{[
|
||||
{ value: 'grid', icon: 'fa-solid fa-table-cells-large', label: 'Grid view' },
|
||||
{ value: 'list', icon: 'fa-solid fa-list', label: 'List view' },
|
||||
].map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => updateView(option.value)}
|
||||
className={`inline-flex items-center gap-2 rounded-full px-3 py-2 text-xs font-semibold transition ${viewMode === option.value ? 'bg-white text-slate-950' : 'text-slate-300 hover:text-white'}`}
|
||||
>
|
||||
<i className={option.icon} />
|
||||
<span className="hidden sm:inline">{option.label}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{quickCreate.map((action) => (
|
||||
<a
|
||||
key={action.key}
|
||||
href={action.url}
|
||||
onClick={() => trackStudioEvent('studio_quick_create_used', {
|
||||
surface: studioSurface(),
|
||||
module: action.key,
|
||||
meta: {
|
||||
href: action.url,
|
||||
label: action.label,
|
||||
},
|
||||
})}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-xs font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15"
|
||||
>
|
||||
<i className={action.icon} />
|
||||
<span>New {action.label}</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 text-sm text-slate-400">
|
||||
<p>
|
||||
Showing <span className="font-semibold text-white">{items.length}</span> of <span className="font-semibold text-white">{Number(meta.total || 0).toLocaleString()}</span> items
|
||||
</p>
|
||||
<p>Page {meta.current_page || 1} of {meta.last_page || 1}</p>
|
||||
</div>
|
||||
|
||||
{items.length > 0 ? (
|
||||
viewMode === 'grid' ? (
|
||||
<div className="grid gap-5 sm:grid-cols-2 xl:grid-cols-3">
|
||||
{items.map((item) => <GridCard key={item.id} item={item} onExecuteAction={executeAction} busyKey={busyKey} />)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
{items.map((item) => <ListRow key={item.id} item={item} onExecuteAction={executeAction} busyKey={busyKey} />)}
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
<section className="rounded-[28px] border border-dashed border-white/15 bg-white/[0.02] px-6 py-16 text-center">
|
||||
<h3 className="text-xl font-semibold text-white">{emptyTitle}</h3>
|
||||
<p className="mx-auto mt-3 max-w-xl text-sm text-slate-400">{emptyBody}</p>
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between rounded-[24px] border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-300">
|
||||
<button
|
||||
type="button"
|
||||
disabled={(meta.current_page || 1) <= 1}
|
||||
onClick={() => updateQuery({ page: Math.max(1, (meta.current_page || 1) - 1) })}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-white/10 px-4 py-2 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
<i className="fa-solid fa-arrow-left" />
|
||||
Previous
|
||||
</button>
|
||||
|
||||
<span className="text-xs uppercase tracking-[0.2em] text-slate-500">Creator Studio</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
disabled={(meta.current_page || 1) >= (meta.last_page || 1)}
|
||||
onClick={() => updateQuery({ page: (meta.current_page || 1) + 1 })}
|
||||
className="inline-flex items-center gap-2 rounded-full border border-white/10 px-4 py-2 disabled:cursor-not-allowed disabled:opacity-40"
|
||||
>
|
||||
Next
|
||||
<i className="fa-solid fa-arrow-right" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user