Commit workspace changes
This commit is contained in:
@@ -22,14 +22,16 @@ function toCard(item) {
|
||||
}
|
||||
|
||||
export default function CreatorSpotlight({ artwork, presentSq, related = [] }) {
|
||||
const [following, setFollowing] = useState(Boolean(artwork?.viewer?.is_following_author))
|
||||
const [followersCount, setFollowersCount] = useState(Number(artwork?.user?.followers_count || 0))
|
||||
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?.user || {}
|
||||
const user = artwork?.credits?.primary_author || artwork?.user || {}
|
||||
const isOwnArtwork = Number(artwork?.viewer?.id || 0) > 0 && Number(artwork?.viewer?.id) === Number(user.id || 0)
|
||||
const authorName = user.name || user.username || 'Artist'
|
||||
const profileUrl = user.profile_url || (user.username ? `/@${user.username}` : '#')
|
||||
const avatar = user.avatar_url || presentSq?.url || AVATAR_FALLBACK
|
||||
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 filtered = (Array.isArray(related) ? related : []).filter((item) => {
|
||||
@@ -63,7 +65,8 @@ export default function CreatorSpotlight({ artwork, presentSq, related = [] }) {
|
||||
<a href={profileUrl} className="mt-3 block text-base font-bold text-white transition-colors hover:text-accent">
|
||||
{authorName}
|
||||
</a>
|
||||
{user.username && <p className="text-xs text-white/40">@{user.username}</p>}
|
||||
{!isGroupPublisher && user.username && <p className="text-xs text-white/40">@{user.username}</p>}
|
||||
{isGroupPublisher && artwork?.credits?.primary_author ? <p className="text-xs text-white/40">Primary author: {artwork.credits.primary_author.name || artwork.credits.primary_author.username}</p> : null}
|
||||
<p className="mt-1 text-xs font-medium text-white/30">
|
||||
{followersCount.toLocaleString()} Followers
|
||||
</p>
|
||||
@@ -80,7 +83,7 @@ export default function CreatorSpotlight({ artwork, presentSq, related = [] }) {
|
||||
</svg>
|
||||
Profile
|
||||
</a>
|
||||
{!isOwnArtwork ? (
|
||||
{!isOwnArtwork && !isGroupPublisher ? (
|
||||
<FollowButton
|
||||
username={user.username}
|
||||
initialFollowing={following}
|
||||
@@ -93,6 +96,31 @@ export default function CreatorSpotlight({ artwork, presentSq, related = [] }) {
|
||||
}}
|
||||
/>
|
||||
) : 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>
|
||||
|
||||
@@ -100,7 +128,7 @@ export default function CreatorSpotlight({ artwork, presentSq, related = [] }) {
|
||||
{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">More from {authorName}</h3>
|
||||
<h3 className="text-sm font-semibold text-white/80">{isGroupPublisher ? 'More related works' : `More from ${authorName}`}</h3>
|
||||
<a href={profileUrl} 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" />
|
||||
|
||||
Reference in New Issue
Block a user