feat: increase gallery grid from 4 to 5 columns per row on desktopfeat: increase gallery grid from 4 to 5 columns per row on desktop

resources/js/components/artwork/ArtworkComments.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+
+function timeAgo(dateStr) {
+  if (!dateStr) return ''
+  const date = new Date(dateStr)
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  if (seconds < 60) return 'just now'
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 365) return `${days}d ago`
+  return date.toLocaleDateString(undefined, { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+function Avatar({ user, size = 36 }) {
+  if (user?.avatar_url) {
+    return (
+      <img
+        src={user.avatar_url}
+        alt={user.name || user.username || ''}
+        width={size}
+        height={size}
+        className="rounded-full object-cover shrink-0"
+        style={{ width: size, height: size }}
+        loading="lazy"
+      />
+    )
+  }
+  const initials = (user?.name || user?.username || '?').slice(0, 1).toUpperCase()
+  return (
+    <span
+      className="flex items-center justify-center rounded-full bg-neutral-700 text-sm font-bold text-white shrink-0"
+      style={{ width: size, height: size }}
+    >
+      {initials}
+    </span>
+  )
+}
+
+export default function ArtworkComments({ comments = [] }) {
+  if (!comments || comments.length === 0) return null
+
+  return (
+    <section aria-label="Comments">
+      <h2 className="text-base font-semibold text-white mb-4">
+        Comments{' '}
+        <span className="text-neutral-500 font-normal">({comments.length})</span>
+      </h2>
+
+      <ul className="space-y-5">
+        {comments.map((comment) => (
+          <li key={comment.id} className="flex gap-3">
+            {comment.user?.profile_url ? (
+              <a href={comment.user.profile_url} className="shrink-0 mt-0.5">
+                <Avatar user={comment.user} size={36} />
+              </a>
+            ) : (
+              <span className="shrink-0 mt-0.5">
+                <Avatar user={comment.user} size={36} />
+              </span>
+            )}
+
+            <div className="min-w-0 flex-1">
+              <div className="flex items-baseline gap-2 flex-wrap">
+                {comment.user?.profile_url ? (
+                  <a
+                    href={comment.user.profile_url}
+                    className="text-sm font-medium text-white hover:underline"
+                  >
+                    {comment.user.name || comment.user.username || 'Member'}
+                  </a>
+                ) : (
+                  <span className="text-sm font-medium text-white">
+                    {comment.user?.name || comment.user?.username || 'Member'}
+                  </span>
+                )}
+                <time
+                  dateTime={comment.created_at}
+                  title={comment.created_at ? new Date(comment.created_at).toLocaleString() : ''}
+                  className="text-xs text-neutral-500"
+                >
+                  {timeAgo(comment.created_at)}
+                </time>
+              </div>
+
+              <p className="mt-1 text-sm text-neutral-300 whitespace-pre-line break-words leading-relaxed">
+                {comment.content}
+              </p>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </section>
+  )
+}