Save workspace changes
This commit is contained in:
64
resources/js/Pages/World/WorldIndex.jsx
Normal file
64
resources/js/Pages/World/WorldIndex.jsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import React from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import WorldCard from '../../components/worlds/WorldCard'
|
||||
|
||||
function WorldRail({ title, description, items }) {
|
||||
if (!Array.isArray(items) || items.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="mt-10">
|
||||
<div className="mb-5 flex items-end justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">{title}</h2>
|
||||
{description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{description}</p> : null}
|
||||
</div>
|
||||
<div className="text-xs font-semibold uppercase tracking-[0.18em] text-slate-500">{items.length} worlds</div>
|
||||
</div>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{items.map((world) => <WorldCard key={world.id} world={world} compact />)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default function WorldIndex() {
|
||||
const { props } = usePage()
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top_left,_rgba(249,115,22,0.12),_transparent_28%),radial-gradient(circle_at_top_right,_rgba(56,189,248,0.12),_transparent_32%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
|
||||
<SeoHead title={props.seo?.title || 'Worlds - Skinbase Nova'} description={props.seo?.description || props.description} image={props.seo?.image} />
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<section className="rounded-[36px] border border-white/10 bg-white/[0.03] p-6 sm:p-8">
|
||||
<div className="max-w-4xl">
|
||||
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/70">Skinbase Nova Worlds</p>
|
||||
<h1 className="mt-4 text-4xl font-semibold tracking-[-0.05em] text-white sm:text-5xl">Curated spaces for seasonal culture, scene moments, and editorial campaigns.</h1>
|
||||
<p className="mt-5 max-w-3xl text-base leading-7 text-slate-300">Worlds bundle together artworks, collections, creators, groups, cards, releases, events, challenges, and newsroom context into a single themed destination. They are not filters. They are editorial environments.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{props.featuredWorld ? <section className="mt-8"><WorldCard world={props.featuredWorld} /></section> : null}
|
||||
|
||||
<WorldRail
|
||||
title="Active Worlds"
|
||||
description="Campaigns and seasonal surfaces currently live across the platform."
|
||||
items={props.activeWorlds}
|
||||
/>
|
||||
|
||||
<WorldRail
|
||||
title="Upcoming Worlds"
|
||||
description="Scheduled worlds in the pipeline, ready to anchor the next publishing moment."
|
||||
items={props.upcomingWorlds}
|
||||
/>
|
||||
|
||||
<WorldRail
|
||||
title="Archive Editions"
|
||||
description="Past worlds stay available as browsable records of recurring culture and editorial programming."
|
||||
items={props.archivedWorlds}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
76
resources/js/Pages/World/WorldShow.jsx
Normal file
76
resources/js/Pages/World/WorldShow.jsx
Normal file
@@ -0,0 +1,76 @@
|
||||
import React from 'react'
|
||||
import { usePage } from '@inertiajs/react'
|
||||
import SeoHead from '../../components/seo/SeoHead'
|
||||
import WorldHero from '../../components/worlds/WorldHero'
|
||||
import WorldCommunitySubmissionsSection from '../../components/worlds/WorldCommunitySubmissionsSection'
|
||||
import WorldSection from '../../components/worlds/WorldSection'
|
||||
import WorldCard from '../../components/worlds/WorldCard'
|
||||
|
||||
function SupportingRail({ title, description, items }) {
|
||||
if (!Array.isArray(items) || items.length === 0) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="mt-10">
|
||||
<div className="mb-5 flex items-end justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-semibold tracking-[-0.03em] text-white">{title}</h2>
|
||||
{description ? <p className="mt-2 max-w-3xl text-sm leading-6 text-slate-400">{description}</p> : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-4 xl:grid-cols-3">
|
||||
{items.map((item) => <WorldCard key={item.id} world={item} compact />)}
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default function WorldShow() {
|
||||
const { props } = usePage()
|
||||
const world = props.world
|
||||
const sections = Array.isArray(props.sections) ? props.sections : []
|
||||
const communitySubmissions = props.communitySubmissions || null
|
||||
const previewMode = Boolean(props.previewMode)
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-[radial-gradient(circle_at_top,_rgba(56,189,248,0.12),_transparent_28%),linear-gradient(180deg,_#020617_0%,_#02040a_100%)] px-4 py-10 sm:px-6 lg:px-8">
|
||||
<SeoHead title={props.seo?.title || `${world?.title || 'World'} - Skinbase Nova`} description={props.seo?.description || world?.summary} image={props.seo?.image} />
|
||||
<div className="mx-auto max-w-7xl">
|
||||
{previewMode ? (
|
||||
<section className="mb-6 rounded-[28px] border border-amber-300/20 bg-amber-400/10 px-5 py-4 text-sm text-amber-50">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
<div>
|
||||
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-amber-100/75">Studio preview</div>
|
||||
<div className="mt-1 font-semibold text-white">You are viewing the editorial preview version of this world before or alongside public release.</div>
|
||||
</div>
|
||||
{world?.public_url ? <a href={world.public_url} className="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-xs font-semibold uppercase tracking-[0.16em] text-white">Open canonical page <i className="fa-solid fa-up-right-from-square" /></a> : null}
|
||||
</div>
|
||||
</section>
|
||||
) : null}
|
||||
|
||||
<WorldHero world={world} previewMode={previewMode} />
|
||||
|
||||
{sections.length > 0 ? sections.map((section) => <WorldSection key={section.key} section={section} />) : (
|
||||
<section className="mt-10 rounded-[28px] border border-dashed border-white/10 bg-white/[0.02] p-6 text-sm text-slate-400">
|
||||
This world has been themed and published, but no curated sections have been attached yet.
|
||||
</section>
|
||||
)}
|
||||
|
||||
<WorldCommunitySubmissionsSection section={communitySubmissions} />
|
||||
|
||||
<SupportingRail
|
||||
title="Archive Editions"
|
||||
description="Past iterations remain accessible so recurring worlds can build continuity over time."
|
||||
items={props.archiveEditions}
|
||||
/>
|
||||
|
||||
<SupportingRail
|
||||
title="Related Worlds"
|
||||
description="Other worlds sharing the same recurrence, theme, or editorial lineage."
|
||||
items={props.relatedWorlds}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user