fixed gallery

2026-02-22 17:09:34 +01:00
parent 48e2055b6a
commit 5c97488e80
33 changed files with 2062 additions and 550 deletions
--- a/resources/js/components/artwork/ArtworkAuthor.jsx
+++ b/resources/js/components/artwork/ArtworkAuthor.jsx
@@ -0,0 +1,83 @@
+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>
+  )
+}