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

feat: ship creator journey v2 and profile updates

Browse Source
This commit is contained in:
Gregor Klevže
2026-04-12 21:42:07 +02:00
parent a2457f4e49
commit d5cff21ea2
335 changed files with 20147 additions and 1545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
resources/js/components/profile/collections/CollectionCard.jsx
View File

@@ -46,8 +46,35 @@ function StatPill({ icon, label, value }) {
)
}
export default function CollectionCard({ collection, isOwner, onDelete, onToggleFeature, onMoveUp, onMoveDown, canMoveUp, canMoveDown, busy = false, saveContext = null, saveContextMeta = null }) {
function CoverMedia({ collection, isOwner }) {
const coverImage = collection?.cover_image
const coverMaturity = !isOwner && collection?.cover_image_maturity ? collection.cover_image_maturity : null
const shouldBlur = Boolean(coverMaturity?.should_blur)
const isMature = Boolean(coverMaturity?.is_mature_effective)
if (!coverImage) {
return (
<div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,rgba(8,17,31,1),rgba(15,23,42,1),rgba(8,17,31,1))] text-slate-500">
<i className="fa-solid fa-layer-group text-4xl" />
</div>
)
}
return (
<div className="relative aspect-[16/10] overflow-hidden bg-slate-950">
<img
src={coverImage}
alt={collection?.title || 'Collection cover'}
className={`h-full w-full object-cover transition-[transform,filter] duration-500 group-hover:scale-[1.04] ${shouldBlur ? 'scale-[1.02] blur-xl' : ''}`}
loading="lazy"
/>
{isMature ? <div className="absolute left-3 top-3 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Mature cover</div> : null}
{shouldBlur ? <div className="absolute inset-x-3 bottom-3 rounded-full border border-amber-300/20 bg-black/60 px-3 py-1 text-[10px] font-semibold uppercase tracking-[0.16em] text-amber-100">Blurred by your settings</div> : null}
</div>
)
}
export default function CollectionCard({ collection, isOwner, onDelete, onToggleFeature, onMoveUp, onMoveDown, canMoveUp, canMoveDown, busy = false, saveContext = null, saveContextMeta = null }) {
const [saved, setSaved] = React.useState(Boolean(collection?.saved))
const [saveBusy, setSaveBusy] = React.useState(false)
@@ -113,20 +140,7 @@ export default function CollectionCard({ collection, isOwner, onDelete, onToggle
>
<div className="absolute inset-0 bg-[radial-gradient(circle_at_top_left,rgba(56,189,248,0.12),transparent_34%),radial-gradient(circle_at_bottom_right,rgba(249,115,22,0.12),transparent_28%)] opacity-0 transition duration-300 group-hover:opacity-100" />
<div className="relative">
{coverImage ? (
<div className="aspect-[16/10] overflow-hidden bg-slate-950">
<img
src={coverImage}
alt={collection?.title || 'Collection cover'}
className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-[1.04]"
loading="lazy"
/>
</div>
) : (
<div className="flex aspect-[16/10] items-center justify-center bg-[linear-gradient(135deg,rgba(8,17,31,1),rgba(15,23,42,1),rgba(8,17,31,1))] text-slate-500">
<i className="fa-solid fa-layer-group text-4xl" />
</div>
)}
<CoverMedia collection={collection} isOwner={isOwner} />
<div className="p-5">
<div className="mb-3 flex flex-wrap items-center gap-2">