255 lines
11 KiB
JavaScript
255 lines
11 KiB
JavaScript
import React, { useEffect, useState } from 'react'
|
|
import { Link, usePage } from '@inertiajs/react'
|
|
import { studioModule, studioSurface, trackStudioEvent } from '../utils/studioEvents'
|
|
|
|
const navGroups = [
|
|
{
|
|
label: 'Creator Studio',
|
|
items: [
|
|
{ label: 'Overview', href: '/studio', icon: 'fa-solid fa-chart-line' },
|
|
{ label: 'Search', href: '/studio/search', icon: 'fa-solid fa-magnifying-glass' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Create',
|
|
items: [
|
|
{ label: 'New Artwork', href: '/upload', icon: 'fa-solid fa-cloud-arrow-up' },
|
|
{ label: 'New Card', href: '/studio/cards/create', icon: 'fa-solid fa-id-card' },
|
|
{ label: 'New Story', href: '/creator/stories/create', icon: 'fa-solid fa-feather-pointed' },
|
|
{ label: 'New Collection', href: '/settings/collections/create', icon: 'fa-solid fa-layer-group' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Content',
|
|
items: [
|
|
{ label: 'All Content', href: '/studio/content', icon: 'fa-solid fa-table-cells-large' },
|
|
{ label: 'Artworks', href: '/studio/artworks', icon: 'fa-solid fa-images' },
|
|
{ label: 'Cards', href: '/studio/cards', icon: 'fa-solid fa-id-card' },
|
|
{ label: 'Collections', href: '/studio/collections', icon: 'fa-solid fa-layer-group' },
|
|
{ label: 'Stories', href: '/studio/stories', icon: 'fa-solid fa-feather-pointed' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Library',
|
|
items: [
|
|
{ label: 'Drafts', href: '/studio/drafts', icon: 'fa-solid fa-file-pen' },
|
|
{ label: 'Scheduled', href: '/studio/scheduled', icon: 'fa-solid fa-calendar-days' },
|
|
{ label: 'Calendar', href: '/studio/calendar', icon: 'fa-solid fa-calendar-range' },
|
|
{ label: 'Archived', href: '/studio/archived', icon: 'fa-solid fa-box-archive' },
|
|
{ label: 'Assets', href: '/studio/assets', icon: 'fa-solid fa-photo-film' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Engagement',
|
|
items: [
|
|
{ label: 'Inbox', href: '/studio/inbox', icon: 'fa-solid fa-inbox' },
|
|
{ label: 'Activity', href: '/studio/activity', icon: 'fa-solid fa-bell' },
|
|
{ label: 'Comments', href: '/studio/comments', icon: 'fa-solid fa-comments' },
|
|
{ label: 'Followers', href: '/studio/followers', icon: 'fa-solid fa-user-group' },
|
|
{ label: 'Challenges', href: '/studio/challenges', icon: 'fa-solid fa-trophy' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Insights',
|
|
items: [
|
|
{ label: 'Analytics', href: '/studio/analytics', icon: 'fa-solid fa-chart-pie' },
|
|
{ label: 'Growth', href: '/studio/growth', icon: 'fa-solid fa-chart-line' },
|
|
],
|
|
},
|
|
{
|
|
label: 'Creator',
|
|
items: [
|
|
{ label: 'Profile', href: '/studio/profile', icon: 'fa-solid fa-id-card' },
|
|
{ label: 'Featured Content', href: '/studio/featured', icon: 'fa-solid fa-wand-magic-sparkles' },
|
|
{ label: 'Preferences', href: '/studio/preferences', icon: 'fa-solid fa-sliders' },
|
|
{ label: 'Studio Settings', href: '/studio/settings', icon: 'fa-solid fa-gear' },
|
|
],
|
|
},
|
|
]
|
|
|
|
const quickCreateItems = [
|
|
{ label: 'Artwork', href: '/upload', icon: 'fa-solid fa-cloud-arrow-up' },
|
|
{ label: 'Card', href: '/studio/cards/create', icon: 'fa-solid fa-id-card' },
|
|
{ label: 'Story', href: '/creator/stories/create', icon: 'fa-solid fa-feather-pointed' },
|
|
{ label: 'Collection', href: '/settings/collections/create', icon: 'fa-solid fa-layer-group' },
|
|
]
|
|
|
|
function NavLink({ item, active }) {
|
|
return (
|
|
<Link
|
|
href={item.href}
|
|
className={`flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-200 ${
|
|
active
|
|
? 'bg-accent/20 text-accent shadow-sm shadow-accent/10'
|
|
: 'text-slate-400 hover:text-white hover:bg-white/5'
|
|
}`}
|
|
>
|
|
<i className={`${item.icon} w-5 text-center text-base`} />
|
|
<span>{item.label}</span>
|
|
</Link>
|
|
)
|
|
}
|
|
|
|
export default function StudioLayout({ children, title, subtitle, actions }) {
|
|
const { url } = usePage()
|
|
const [mobileOpen, setMobileOpen] = useState(false)
|
|
const [createOpen, setCreateOpen] = useState(false)
|
|
const pathname = url.split('?')[0]
|
|
|
|
useEffect(() => {
|
|
const moduleKey = studioModule(pathname)
|
|
const surface = studioSurface(pathname)
|
|
|
|
trackStudioEvent('studio_opened', {
|
|
surface,
|
|
module: moduleKey,
|
|
})
|
|
|
|
trackStudioEvent('studio_module_opened', {
|
|
surface,
|
|
module: moduleKey,
|
|
})
|
|
}, [pathname])
|
|
|
|
const isActive = (href) => {
|
|
if (href === '/studio') return pathname === '/studio'
|
|
return pathname.startsWith(href)
|
|
}
|
|
|
|
const handleQuickCreateClick = (item) => {
|
|
trackStudioEvent('studio_quick_create_used', {
|
|
surface: studioSurface(pathname),
|
|
module: item.label.toLowerCase(),
|
|
meta: {
|
|
href: item.href,
|
|
label: item.label,
|
|
},
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(14,165,233,0.12),_transparent_30%),radial-gradient(circle_at_bottom_right,_rgba(34,197,94,0.12),_transparent_35%),linear-gradient(180deg,_#06101d_0%,_#020617_45%,_#02040a_100%)]">
|
|
<div className="sticky top-16 z-30 border-b border-white/10 bg-slate-950/80 backdrop-blur-xl lg:hidden">
|
|
<div className="flex items-center justify-between px-4 py-3">
|
|
<div>
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/70">Creator Studio</p>
|
|
<h1 className="text-lg font-bold text-white">{title || 'Creator Studio'}</h1>
|
|
</div>
|
|
<button
|
|
onClick={() => setMobileOpen(!mobileOpen)}
|
|
className="rounded-full border border-white/10 p-2 text-slate-400 hover:text-white"
|
|
aria-label="Toggle navigation"
|
|
>
|
|
<i className={`fa-solid ${mobileOpen ? 'fa-xmark' : 'fa-bars'} text-xl`} />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{mobileOpen && (
|
|
<div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm lg:hidden" onClick={() => setMobileOpen(false)}>
|
|
<nav
|
|
className="absolute left-0 top-0 bottom-0 w-80 overflow-y-auto border-r border-white/10 bg-slate-950 p-4 pt-20"
|
|
onClick={(event) => event.stopPropagation()}
|
|
>
|
|
<StudioSidebarContent isActive={isActive} onNavigate={() => setMobileOpen(false)} onQuickCreate={handleQuickCreateClick} />
|
|
</nav>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex">
|
|
<aside className="sticky top-16 hidden min-h-[calc(100vh-4rem)] w-72 self-start border-r border-white/10 bg-slate-950/55 p-4 pt-6 backdrop-blur-xl lg:flex lg:flex-col">
|
|
<StudioSidebarContent isActive={isActive} onQuickCreate={handleQuickCreateClick} />
|
|
</aside>
|
|
|
|
<main className="min-w-0 flex-1 px-4 pb-10 pt-4 lg:px-8 lg:pt-6">
|
|
<section className="mb-6 rounded-[32px] border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(34,197,94,0.12),_transparent_28%),radial-gradient(circle_at_bottom_right,_rgba(56,189,248,0.12),_transparent_35%),linear-gradient(135deg,_rgba(15,23,42,0.84),_rgba(2,6,23,0.95))] p-5 shadow-[0_22px_70px_rgba(2,6,23,0.32)] lg:p-6">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
|
|
<div className="max-w-3xl">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/70">Creator Studio</p>
|
|
{title && <h1 className="mt-2 text-3xl font-semibold text-white lg:text-4xl">{title}</h1>}
|
|
{subtitle && <p className="mt-3 max-w-2xl text-sm leading-6 text-slate-300">{subtitle}</p>}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap items-center gap-3 lg:justify-end">
|
|
{actions}
|
|
<div className="relative">
|
|
<button
|
|
type="button"
|
|
onClick={() => setCreateOpen((current) => !current)}
|
|
className="inline-flex items-center gap-2 rounded-full border border-sky-300/20 bg-sky-300/10 px-4 py-2 text-sm font-semibold text-sky-100 transition hover:border-sky-300/35 hover:bg-sky-300/15"
|
|
>
|
|
<i className="fa-solid fa-plus" />
|
|
Create New
|
|
</button>
|
|
{createOpen && (
|
|
<div className="absolute right-0 top-[calc(100%+0.75rem)] z-20 min-w-[220px] rounded-[24px] border border-white/10 bg-slate-950/95 p-2 shadow-[0_18px_40px_rgba(2,6,23,0.5)] backdrop-blur-xl">
|
|
{quickCreateItems.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
onClick={() => handleQuickCreateClick(item)}
|
|
className="flex items-center gap-3 rounded-2xl px-4 py-3 text-sm text-slate-200 transition hover:bg-white/[0.06] hover:text-white"
|
|
>
|
|
<i className={`${item.icon} w-5 text-center text-sky-200`} />
|
|
<span>New {item.label}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function StudioSidebarContent({ isActive, onNavigate, onQuickCreate }) {
|
|
return (
|
|
<>
|
|
<div className="mb-6 rounded-[26px] border border-white/10 bg-white/[0.04] p-4">
|
|
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/70">Skinbase Nova</p>
|
|
<h2 className="mt-2 text-xl font-semibold text-white">Creator Studio</h2>
|
|
<p className="mt-2 text-sm leading-6 text-slate-400">Create, manage, and grow from one modular workspace built for every creator surface.</p>
|
|
</div>
|
|
|
|
<nav className="flex-1 space-y-5" onClick={onNavigate}>
|
|
{navGroups.map((group) => (
|
|
<div key={group.label}>
|
|
<h3 className="mb-2 px-3 text-[11px] font-semibold uppercase tracking-[0.22em] text-slate-500">{group.label}</h3>
|
|
<div className="space-y-1">
|
|
{group.items.map((item) => (
|
|
<NavLink key={item.href} item={item} active={isActive(item.href)} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</nav>
|
|
|
|
<div className="mt-6 rounded-[24px] border border-white/10 bg-[linear-gradient(135deg,_rgba(15,23,42,0.95),_rgba(12,74,110,0.4))] p-4">
|
|
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-sky-100/70">Quick create</p>
|
|
<div className="mt-3 grid gap-2">
|
|
{quickCreateItems.map((item) => (
|
|
<a
|
|
key={item.href}
|
|
href={item.href}
|
|
className="inline-flex items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-100 transition hover:border-white/20 hover:bg-white/[0.06]"
|
|
onClick={() => {
|
|
onQuickCreate?.(item)
|
|
onNavigate?.()
|
|
}}
|
|
>
|
|
<i className={`${item.icon} w-5 text-center text-sky-200`} />
|
|
<span>New {item.label}</span>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|