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

77
resources/js/components/profile/tabs/TabPosts.jsx
View File

@@ -5,10 +5,6 @@ import PostComposer from '../../Feed/PostComposer'
import PostCardSkeleton from '../../Feed/PostCardSkeleton'
import FeedSidebar from '../../Feed/FeedSidebar'
function formatCompactNumber(value) {
return Number(value ?? 0).toLocaleString()
}
function EmptyPostsState({ isOwner, username }) {
return (
<div className="flex flex-col items-center justify-center rounded-[28px] border border-dashed border-white/12 bg-white/[0.03] px-6 py-20 text-center">
@@ -78,7 +74,6 @@ export default function TabPosts({
suggestedUsers,
socialLinks,
countryName,
profileUrl,
onTabChange,
}) {
const [posts, setPosts] = useState([])
@@ -116,78 +111,14 @@ export default function TabPosts({
setPosts((prev) => prev.filter((p) => p.id !== postId))
}, [])
const summaryCards = [
{ label: 'Followers', value: formatCompactNumber(followerCount), icon: 'fa-user-group' },
{ label: 'Uploads', value: formatCompactNumber(stats?.uploads_count ?? 0), icon: 'fa-image' },
{ label: 'Awards', value: formatCompactNumber(stats?.awards_received_count ?? 0), icon: 'fa-trophy' },
{ label: 'Location', value: countryName || 'Unknown', icon: 'fa-location-dot' },
]
return (
<div className="py-6">
<div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_20rem]">
<section className="rounded-[30px] 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.06))] p-6 shadow-[0_20px_60px_rgba(2,6,23,0.24)]">
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
<div className="max-w-3xl">
<p className="text-[11px] font-semibold uppercase tracking-[0.24em] text-sky-200/80">Profile posts</p>
<h2 className="mt-2 text-3xl font-semibold tracking-[-0.03em] text-white">
Updates, thoughts, and shared work from @{username}
</h2>
<p className="mt-3 max-w-2xl text-sm leading-relaxed text-slate-300">
This stream adds the human layer to the profile: quick notes, shared artwork posts, and announcements that do not belong inside the gallery grid.
</p>
</div>
<div className="flex flex-wrap gap-2">
<button
type="button"
onClick={() => onTabChange?.('artworks')}
className="inline-flex items-center gap-2 rounded-2xl border border-white/15 bg-white/[0.06] px-4 py-2.5 text-sm font-medium text-slate-200 transition-colors hover:bg-white/[0.1]"
>
<i className="fa-solid fa-images fa-fw" />
View artworks
</button>
<button
type="button"
onClick={() => onTabChange?.('about')}
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
>
<i className="fa-solid fa-id-card fa-fw" />
About creator
</button>
{profileUrl ? (
<a
href={profileUrl}
className="inline-flex items-center gap-2 rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-colors hover:bg-white/[0.08] hover:text-white"
>
<i className="fa-solid fa-user fa-fw" />
Canonical profile
</a>
) : null}
</div>
</div>
</section>
<section className="grid grid-cols-2 gap-3 sm:grid-cols-4 xl:grid-cols-2">
{summaryCards.map((card) => (
<div
key={card.label}
className="rounded-[24px] border border-white/10 bg-white/[0.04] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]"
>
<div className="flex items-center justify-between gap-3">
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">{card.label}</div>
<i className={`fa-solid ${card.icon} text-slate-500`} />
</div>
<div className="mt-3 text-xl font-semibold tracking-tight text-white">{card.value}</div>
</div>
))}
</section>
</div>
<div className="mt-6 grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
<div className="grid items-start gap-6 xl:grid-cols-[minmax(0,1fr)_20rem]">
<div className="min-w-0 space-y-4">
{isOwner && authUser && (
<PostComposer user={authUser} onPosted={handlePosted} />
<div className="sticky top-24 z-20">
<PostComposer user={authUser} onPosted={handlePosted} />
</div>
)}
{!loaded && loading && (