44 lines
2.5 KiB
JavaScript
44 lines
2.5 KiB
JavaScript
import React from 'react'
|
|
|
|
export default function CollectionEmptyState({ isOwner, createUrl }) {
|
|
const smartUrl = createUrl ? `${createUrl}?mode=smart` : null
|
|
|
|
return (
|
|
<div className="relative overflow-hidden rounded-[28px] border border-white/10 bg-[linear-gradient(135deg,rgba(56,189,248,0.08),rgba(255,255,255,0.04),rgba(249,115,22,0.1))] px-6 py-14 text-center shadow-[0_26px_80px_rgba(2,6,23,0.28)]">
|
|
<div className="pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.12),transparent_32%),radial-gradient(circle_at_bottom_right,rgba(249,115,22,0.12),transparent_30%)]" />
|
|
<div className="relative mx-auto max-w-xl">
|
|
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-[24px] border border-white/12 bg-white/[0.06] text-sky-200 shadow-[0_18px_40px_rgba(2,6,23,0.28)]">
|
|
<i className="fa-solid fa-layer-group text-3xl" />
|
|
</div>
|
|
<h3 className="text-2xl font-semibold tracking-[-0.03em] text-white">
|
|
{isOwner ? 'Create your first collection' : 'No public collections yet'}
|
|
</h3>
|
|
<p className="mx-auto mt-3 max-w-md text-sm leading-relaxed text-slate-300">
|
|
{isOwner
|
|
? 'Collections turn your gallery into intentional showcases. Build them manually or let smart rules keep them fresh from your own artwork library.'
|
|
: 'This creator has not published any collections.'}
|
|
</p>
|
|
{isOwner && createUrl ? (
|
|
<div className="mt-6 flex flex-wrap items-center justify-center gap-3">
|
|
<a
|
|
href={createUrl}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-sky-300/25 bg-sky-400/10 px-5 py-3 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15"
|
|
>
|
|
<i className="fa-solid fa-plus fa-fw" />
|
|
Create Manual Collection
|
|
</a>
|
|
<a
|
|
href={smartUrl || createUrl}
|
|
className="inline-flex items-center gap-2 rounded-2xl border border-white/12 bg-white/[0.05] px-5 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
|
|
>
|
|
<i className="fa-solid fa-wand-magic-sparkles fa-fw" />
|
|
Create Smart Collection
|
|
</a>
|
|
</div>
|
|
) : null}
|
|
{isOwner ? <p className="mx-auto mt-6 max-w-lg text-xs uppercase tracking-[0.18em] text-slate-400">Examples: Featured wallpapers, best of 2026, cyberpunk studies, blue neon universe</p> : null}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|