klevze/SkinbaseNova
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

optimizations

Browse Source
This commit is contained in:
Gregor Klevže
2026-03-28 19:15:39 +01:00
parent 0b25d9570a
commit cab4fbd83e
509 changed files with 1016804 additions and 1605 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
resources/js/Pages/Collection/CollectionSeriesShow.jsx Normal file
View File

@@ -0,0 +1,98 @@
import React from 'react'
import { Head, usePage } from '@inertiajs/react'
import CollectionCard from '../../components/profile/collections/CollectionCard'
function StatCard({ icon, label, value }) {
return (
<div className="rounded-[22px] border border-white/10 bg-white/[0.05] px-4 py-4">
<div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">
<i className={`fa-solid ${icon} text-[10px]`} />
{label}
</div>
<div className="mt-2 text-2xl font-semibold tracking-[-0.03em] text-white">{value}</div>
</div>
)
}
export default function CollectionSeriesShow() {
const { props } = usePage()
const seo = props.seo || {}
const title = props.title || `Collection Series: ${props.seriesKey || ''}`
const description = props.description || 'A connected sequence of public collections on Skinbase Nova.'
const collections = Array.isArray(props.collections) ? props.collections : []
const leadCollection = props.leadCollection || null
const stats = props.stats || {}
return (
<>
<Head>
<title>{seo.title || `${title} — Skinbase Nova`}</title>
<meta name="description" content={seo.description || description} />
{seo.canonical ? <link rel="canonical" href={seo.canonical} /> : null}
<meta name="robots" content={seo.robots || 'index,follow'} />
</Head>
<div className="relative min-h-screen overflow-hidden pb-16">
<div aria-hidden="true" className="pointer-events-none absolute inset-x-0 top-0 -z-10 h-[36rem] opacity-95" style={{ background: 'radial-gradient(circle at 10% 15%, rgba(59,130,246,0.18), transparent 28%), radial-gradient(circle at 84% 18%, rgba(34,197,94,0.16), transparent 24%), linear-gradient(180deg, #07101d 0%, #0a1220 42%, #08111f 100%)' }} />
<div aria-hidden="true" className="pointer-events-none absolute inset-0 -z-10 opacity-[0.05]" style={{ backgroundImage: 'url(/gfx/noise.png)', backgroundSize: '180px' }} />
<div className="mx-auto max-w-7xl px-4 pt-8 md:px-6">
<div className="flex flex-wrap items-center gap-3 text-sm text-slate-300">
<a href="/collections/featured" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">
<i className="fa-solid fa-arrow-left fa-fw text-[11px]" />
Back to collections
</a>
{leadCollection?.url ? <a href={leadCollection.url} className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-4 py-2 transition hover:bg-white/[0.07] hover:text-white">Lead collection</a> : null}
</div>
<section className="mt-6 overflow-hidden rounded-[34px] border border-white/10 bg-white/[0.04] p-6 shadow-[0_30px_90px_rgba(2,6,23,0.28)] backdrop-blur-sm md:p-8">
<div className="grid gap-8 xl:grid-cols-[minmax(0,1.15fr)_400px] xl:items-end">
<div>
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Series</p>
<h1 className="mt-3 text-4xl font-semibold tracking-[-0.05em] text-white md:text-5xl">{title}</h1>
<p className="mt-4 max-w-3xl text-sm leading-relaxed text-slate-300 md:text-[15px]">{description}</p>
{props.seriesKey ? <div className="mt-5 inline-flex rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-xs font-semibold uppercase tracking-[0.18em] text-slate-300">{props.seriesKey}</div> : null}
</div>
<div className="grid gap-3 sm:grid-cols-3 xl:grid-cols-1">
<StatCard icon="fa-layer-group" label="Collections" value={Number(stats.collections || collections.length).toLocaleString()} />
<StatCard icon="fa-user-group" label="Creators" value={Number(stats.owners || 0).toLocaleString()} />
<StatCard icon="fa-images" label="Artworks" value={Number(stats.artworks || 0).toLocaleString()} />
</div>
</div>
</section>
{leadCollection ? (
<section className="mt-8 rounded-[32px] border border-white/10 bg-white/[0.04] p-6 backdrop-blur-sm md:p-7">
<div className="flex flex-wrap items-end justify-between gap-4">
<div>
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Lead Entry</p>
<h2 className="mt-2 text-2xl font-semibold text-white">Start with the opening collection</h2>
</div>
{stats.latest_activity_at ? <div className="text-xs uppercase tracking-[0.16em] text-slate-400">Latest activity {new Date(stats.latest_activity_at).toLocaleDateString()}</div> : null}
</div>
<div className="mt-5 max-w-xl">
<CollectionCard collection={leadCollection} isOwner={false} />
</div>
</section>
) : null}
<section className="mt-8 pb-8">
<div className="flex items-end justify-between gap-4">
<div>
<p className="text-[11px] font-semibold uppercase tracking-[0.22em] text-sky-200/80">Sequence</p>
<h2 className="mt-2 text-2xl font-semibold text-white">Public collections in order</h2>
</div>
</div>
<div className="mt-5 grid grid-cols-1 gap-5 md:grid-cols-2 xl:grid-cols-3">
{collections.map((collection) => (
<CollectionCard key={collection.id} collection={collection} isOwner={false} />
))}
</div>
</section>
</div>
</div>
</>
)
}