193 lines
9.6 KiB
JavaScript
193 lines
9.6 KiB
JavaScript
import React, { useMemo, useState } from 'react'
|
|
import AuthorBioPopover from './AuthorBioPopover'
|
|
import FollowButton from '../social/FollowButton'
|
|
|
|
const AVATAR_FALLBACK = 'https://files.skinbase.org/default/missing_sq.webp'
|
|
const NUMBER_FORMATTER = new Intl.NumberFormat('en-US')
|
|
|
|
function formatCount(value) {
|
|
const n = Number(value || 0)
|
|
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1).replace(/\.0$/, '')}M`
|
|
if (n >= 1_000) return `${(n / 1_000).toFixed(1).replace(/\.0$/, '')}k`
|
|
return `${n}`
|
|
}
|
|
|
|
function toCard(item) {
|
|
return {
|
|
id: item?.id || item?.slug || item?.url,
|
|
title: item?.title,
|
|
author: item?.author,
|
|
authorId: Number(item?.author_id || 0),
|
|
publisherType: item?.publisher_type || 'user',
|
|
publisherId: Number(item?.publisher_id || 0),
|
|
url: item?.url,
|
|
thumb: item?.thumb,
|
|
thumbSrcSet: item?.thumb_srcset,
|
|
}
|
|
}
|
|
|
|
export default function CreatorSpotlight({ artwork, presentSq, related = [] }) {
|
|
const publisher = artwork?.publisher || null
|
|
const isGroupPublisher = publisher?.type === 'group'
|
|
const [following, setFollowing] = useState(Boolean(isGroupPublisher ? artwork?.viewer?.is_following_group : artwork?.viewer?.is_following_author))
|
|
const [followersCount, setFollowersCount] = useState(Number(isGroupPublisher ? publisher?.followers_count || 0 : artwork?.user?.followers_count || 0))
|
|
|
|
const user = artwork?.credits?.primary_author || artwork?.user || {}
|
|
const primaryAuthor = artwork?.credits?.primary_author || null
|
|
const bioAuthor = isGroupPublisher ? primaryAuthor : user
|
|
const isOwnArtwork = Number(artwork?.viewer?.id || 0) > 0 && Number(artwork?.viewer?.id) === Number(user.id || 0)
|
|
const authorName = isGroupPublisher ? (publisher?.name || 'Group') : (user.name || user.username || 'Artist')
|
|
const profileUrl = isGroupPublisher ? (publisher?.profile_url || '#') : (user.profile_url || (user.username ? `/@${user.username}` : '#'))
|
|
const avatar = (isGroupPublisher ? publisher?.avatar_url : user.avatar_url) || presentSq?.url || AVATAR_FALLBACK
|
|
|
|
const creatorItems = useMemo(() => {
|
|
const currentAuthorId = Number(user?.id || 0)
|
|
const currentPublisherId = Number(publisher?.id || user?.id || 0)
|
|
|
|
const filtered = (Array.isArray(related) ? related : []).filter((item) => {
|
|
const notCurrent = item?.url && item.url !== artwork?.canonical_url
|
|
|
|
if (!notCurrent) {
|
|
return false
|
|
}
|
|
|
|
if (isGroupPublisher) {
|
|
return item?.publisher_type === 'group' && Number(item?.publisher_id || 0) === currentPublisherId
|
|
}
|
|
|
|
return Number(item?.author_id || 0) === currentAuthorId
|
|
})
|
|
|
|
return filtered.slice(0, 12).map(toCard)
|
|
}, [related, isGroupPublisher, publisher?.id, user?.id, artwork?.canonical_url])
|
|
|
|
return (
|
|
<>
|
|
<section className="rounded-2xl border border-white/[0.06] bg-white/[0.03] p-5">
|
|
{/* Avatar + info — stacked for sidebar */}
|
|
<div className="flex flex-col items-center text-center">
|
|
<a href={profileUrl} className="group">
|
|
<img
|
|
src={avatar}
|
|
alt={authorName}
|
|
className="h-16 w-16 rounded-full border-2 border-white/10 object-cover shadow-lg shadow-black/40 transition-transform duration-200 group-hover:scale-105"
|
|
loading="lazy"
|
|
decoding="async"
|
|
onError={(event) => {
|
|
event.currentTarget.src = AVATAR_FALLBACK
|
|
}}
|
|
/>
|
|
</a>
|
|
|
|
<div className="relative mt-3 w-full px-10 text-center">
|
|
<a href={profileUrl} className="block text-base font-bold text-white transition-colors hover:text-accent">
|
|
{authorName}
|
|
</a>
|
|
{!isGroupPublisher && user.username ? <p className="text-xs text-white/40">@{user.username}</p> : null}
|
|
{isGroupPublisher && primaryAuthor ? <p className="text-xs text-white/40">Primary author: {primaryAuthor.name || primaryAuthor.username}</p> : null}
|
|
{bioAuthor?.username ? (
|
|
<span className="absolute right-0 top-1/2 -translate-y-1/2">
|
|
<AuthorBioPopover author={bioAuthor} />
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<p className="mt-1 text-xs font-medium text-white/30">
|
|
{NUMBER_FORMATTER.format(followersCount)} Followers
|
|
</p>
|
|
|
|
{/* Profile + Follow buttons */}
|
|
<div className="mt-4 flex w-full gap-2">
|
|
<a
|
|
href={profileUrl}
|
|
title="View profile"
|
|
className="flex flex-1 items-center justify-center gap-1.5 rounded-xl border border-white/[0.08] bg-white/[0.04] px-3 py-2.5 text-sm font-medium text-white/70 transition-all hover:border-white/[0.15] hover:bg-white/[0.07] hover:text-white"
|
|
>
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="h-4 w-4">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
|
</svg>
|
|
Profile
|
|
</a>
|
|
{!isOwnArtwork && !isGroupPublisher ? (
|
|
<FollowButton
|
|
username={user.username}
|
|
initialFollowing={following}
|
|
initialCount={followersCount}
|
|
showCount={false}
|
|
className="flex-1"
|
|
onChange={({ following: nextFollowing, followersCount: nextFollowersCount }) => {
|
|
setFollowing(nextFollowing)
|
|
setFollowersCount(nextFollowersCount)
|
|
}}
|
|
/>
|
|
) : null}
|
|
{!isOwnArtwork && isGroupPublisher ? (
|
|
<button
|
|
type="button"
|
|
onClick={async () => {
|
|
const method = following ? 'DELETE' : 'POST'
|
|
const response = await fetch(following ? artwork.publisher?.unfollow_url || `${publisher.profile_url}/follow` : artwork.publisher?.follow_url || `${publisher.profile_url}/follow`, {
|
|
method,
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
Accept: 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '',
|
|
},
|
|
})
|
|
const payload = await response.json().catch(() => ({}))
|
|
if (response.ok) {
|
|
setFollowing(Boolean(payload?.following))
|
|
setFollowersCount(Number(payload?.followers_count || 0))
|
|
}
|
|
}}
|
|
className={`flex-1 rounded-xl border px-3 py-2.5 text-sm font-medium transition ${following ? 'border-white/[0.12] bg-white/[0.05] text-white' : 'border-sky-300/25 bg-sky-300/10 text-sky-100 hover:border-sky-300/35 hover:bg-sky-300/15'}`}
|
|
>
|
|
{following ? 'Following' : 'Follow group'}
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{/* More from creator rail */}
|
|
{creatorItems.length > 0 && (
|
|
<div className="mt-5 border-t border-white/[0.06] pt-5">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold text-white/80">{isGroupPublisher ? 'More related works' : `More from ${authorName}`}</h3>
|
|
<a href={profileUrl} aria-label={isGroupPublisher ? 'View more related works' : `View all from ${authorName}`} className="text-white/30 transition-colors hover:text-white/60">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={2} stroke="currentColor" className="h-4 w-4">
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
<div className="mt-3 grid grid-cols-3 gap-2">
|
|
{creatorItems.slice(0, 3).map((item, idx) => (
|
|
<a key={`${item.id || item.url}-${idx}`} href={item.url} className="group/mini relative overflow-hidden rounded-xl">
|
|
<div className="aspect-square overflow-hidden bg-deep">
|
|
<img
|
|
src={item.thumb || AVATAR_FALLBACK}
|
|
alt={item.title || 'Artwork'}
|
|
className="h-full w-full object-cover transition duration-300 group-hover/mini:scale-[1.06]"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/50 via-transparent to-transparent" />
|
|
<div className="absolute bottom-1.5 left-1.5 right-1.5 flex items-center gap-1">
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" className="h-3 w-3 text-rose-400">
|
|
<path d="m9.653 16.915-.005-.003-.019-.01a20.759 20.759 0 0 1-1.162-.682 22.045 22.045 0 0 1-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 0 1 8-2.828A4.5 4.5 0 0 1 18 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 0 1-3.744 2.582l-.019.01-.005.003h-.002a.723.723 0 0 1-.69 0h-.002Z" />
|
|
</svg>
|
|
<span className="text-[10px] font-bold text-white drop-shadow">
|
|
{item.likes ? formatCount(item.likes) : ''}
|
|
</span>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
</>
|
|
)
|
|
}
|