84 lines
3.2 KiB
JavaScript
84 lines
3.2 KiB
JavaScript
import React, { useState } from 'react'
|
|
|
|
const AVATAR_FALLBACK = 'https://files.skinbase.org/default/missing_sq.webp'
|
|
|
|
export default function ArtworkAuthor({ artwork, presentSq }) {
|
|
const [following, setFollowing] = useState(Boolean(artwork?.viewer?.is_following_author))
|
|
const [followersCount, setFollowersCount] = useState(Number(artwork?.user?.followers_count || 0))
|
|
const user = artwork?.user || {}
|
|
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 csrfToken = typeof document !== 'undefined'
|
|
? document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
|
|
: null
|
|
|
|
const onToggleFollow = async () => {
|
|
const nextState = !following
|
|
setFollowing(nextState)
|
|
try {
|
|
const response = await fetch(`/api/users/${user.id}/follow`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-CSRF-TOKEN': csrfToken || '',
|
|
},
|
|
credentials: 'same-origin',
|
|
body: JSON.stringify({ state: nextState }),
|
|
})
|
|
|
|
if (!response.ok) throw new Error('Follow failed')
|
|
const payload = await response.json()
|
|
if (typeof payload?.followers_count === 'number') {
|
|
setFollowersCount(payload.followers_count)
|
|
}
|
|
setFollowing(Boolean(payload?.is_following))
|
|
} catch {
|
|
setFollowing(!nextState)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<section className="rounded-xl border border-nova-700 bg-panel p-5 shadow-lg shadow-deep/30">
|
|
<h2 className="text-xs font-semibold uppercase tracking-wide text-soft">Author</h2>
|
|
|
|
<div className="mt-4 flex items-center gap-4">
|
|
<img
|
|
src={avatar}
|
|
alt={authorName}
|
|
className="h-14 w-14 rounded-full border border-nova-600 object-cover bg-nova-900/50 shadow-md shadow-deep/30"
|
|
loading="lazy"
|
|
decoding="async"
|
|
onError={(event) => {
|
|
event.currentTarget.src = AVATAR_FALLBACK
|
|
}}
|
|
/>
|
|
|
|
<div className="min-w-0">
|
|
<a href={profileUrl} className="block truncate text-base font-semibold text-white hover:text-accent">
|
|
{authorName}
|
|
</a>
|
|
{user.username && <p className="truncate text-xs text-soft">@{user.username}</p>}
|
|
<p className="mt-1 text-xs text-soft">{followersCount.toLocaleString()} followers</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4 grid grid-cols-2 gap-3">
|
|
<a
|
|
href={profileUrl}
|
|
className="inline-flex min-h-11 items-center justify-center rounded-lg border border-nova-600 px-3 py-2 text-sm text-white hover:bg-nova-800"
|
|
>
|
|
Profile
|
|
</a>
|
|
<button
|
|
type="button"
|
|
className={`inline-flex min-h-11 items-center justify-center rounded-lg px-3 py-2 text-sm font-semibold transition ${following ? 'border border-nova-600 text-white hover:bg-nova-800' : 'bg-accent text-deep hover:brightness-110'}`}
|
|
onClick={onToggleFollow}
|
|
>
|
|
{following ? 'Following' : 'Follow'}
|
|
</button>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|