79 lines
2.6 KiB
JavaScript
79 lines
2.6 KiB
JavaScript
import React from 'react'
|
|
import { usePage } from '@inertiajs/react'
|
|
import ProfileHero from '../../components/profile/ProfileHero'
|
|
import ProfileGalleryPanel from '../../components/profile/ProfileGalleryPanel'
|
|
|
|
export default function ProfileGallery() {
|
|
const { props } = usePage()
|
|
const {
|
|
user,
|
|
profile,
|
|
artworks,
|
|
featuredArtworks,
|
|
followerCount,
|
|
viewerIsFollowing,
|
|
heroBgUrl,
|
|
leaderboardRank,
|
|
countryName,
|
|
isOwner,
|
|
profileUrl,
|
|
} = props
|
|
|
|
const username = user.username || user.name
|
|
const displayName = user.name || user.username || 'Creator'
|
|
|
|
return (
|
|
<div className="min-h-screen pb-16">
|
|
<ProfileHero
|
|
user={user}
|
|
profile={profile}
|
|
isOwner={isOwner}
|
|
viewerIsFollowing={viewerIsFollowing}
|
|
followerCount={followerCount}
|
|
heroBgUrl={heroBgUrl}
|
|
countryName={countryName}
|
|
leaderboardRank={leaderboardRank}
|
|
extraActions={profileUrl ? (
|
|
<a
|
|
href={profileUrl}
|
|
className="inline-flex items-center gap-2 rounded-xl border border-white/15 px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/5 hover:text-white"
|
|
>
|
|
<i className="fa-solid fa-user fa-fw" />
|
|
View Profile
|
|
</a>
|
|
) : null}
|
|
/>
|
|
|
|
<div className="border-y border-white/10 bg-white/[0.02]">
|
|
<div className="mx-auto flex max-w-6xl flex-col gap-4 px-4 py-5 md:flex-row md:items-end md:justify-between">
|
|
<div>
|
|
<p className="text-xs font-semibold uppercase tracking-[0.18em] text-sky-300/80">Public Gallery</p>
|
|
<h2 className="mt-1 text-2xl font-semibold tracking-tight text-white md:text-3xl">
|
|
{displayName}'s artworks
|
|
</h2>
|
|
<p className="mt-2 max-w-2xl text-sm leading-relaxed text-slate-400">
|
|
Browse published work with the same infinite-scroll gallery used across the profile experience.
|
|
</p>
|
|
</div>
|
|
|
|
<a
|
|
href={profileUrl || '#'}
|
|
className="inline-flex items-center gap-2 self-start rounded-xl border border-white/10 bg-white/[0.03] px-4 py-2.5 text-sm font-medium text-slate-300 transition-all hover:bg-white/[0.06] hover:text-white"
|
|
>
|
|
<i className="fa-solid fa-arrow-left fa-fw" />
|
|
Back to profile
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto w-full max-w-6xl px-4 pt-6 md:px-6">
|
|
<ProfileGalleryPanel
|
|
artworks={artworks}
|
|
featuredArtworks={featuredArtworks}
|
|
username={username}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|