optimizations

resources/js/components/profile/activity/ActivityFeed.jsx

@@ -0,0 +1,63 @@
+import React from 'react'
+import ActivityCard from './ActivityCard'
+
+export default function ActivityFeed({ activities, loading, loadingMore, error, sentinelRef }) {
+  if (loading) {
+    return (
+      <div className="rounded-[28px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(10,16,26,0.92),rgba(6,10,18,0.88))] p-6 text-sm text-slate-400 shadow-[0_20px_60px_rgba(0,0,0,0.25)]">
+        Loading activity...
+      </div>
+    )
+  }
+
+  if (error) {
+    return (
+      <div className="rounded-[28px] border border-rose-300/20 bg-rose-500/10 p-6 text-sm text-rose-100 shadow-[0_20px_60px_rgba(0,0,0,0.25)]">
+        {error}
+      </div>
+    )
+  }
+
+  if (!activities.length) {
+    return (
+      <div className="rounded-[28px] border border-dashed border-white/10 bg-[linear-gradient(180deg,rgba(10,16,26,0.92),rgba(6,10,18,0.88))] px-6 py-12 text-center shadow-[0_20px_60px_rgba(0,0,0,0.25)]">
+        <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-3xl border border-white/10 bg-white/[0.04] text-sky-300">
+          <i className="fa-solid fa-wave-square text-xl" />
+        </div>
+        <h3 className="mt-5 text-lg font-semibold text-white">No activity yet</h3>
+        <p className="mx-auto mt-2 max-w-lg text-sm leading-7 text-slate-400">
+          Upload artwork, join a conversation, follow creators, or post in the forum to start building this profile timeline.
+        </p>
+
+        <div className="mt-6 flex flex-wrap justify-center gap-3">
+          <a href="/upload" className="inline-flex items-center gap-2 rounded-full border border-sky-300/30 bg-sky-400/12 px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-sky-100 transition hover:border-sky-200/50 hover:bg-sky-400/18">
+            <i className="fa-solid fa-upload" />
+            Upload artwork
+          </a>
+          <a href="/uploads/latest" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/[0.1] hover:text-white">
+            <i className="fa-solid fa-comment-dots" />
+            Comment on artwork
+          </a>
+          <a href="/discover/trending" className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-4 py-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-200 transition hover:border-white/20 hover:bg-white/[0.1] hover:text-white">
+            <i className="fa-solid fa-user-plus" />
+            Follow creators
+          </a>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-4">
+      {activities.map((activity) => (
+        <ActivityCard key={activity.id} activity={activity} />
+      ))}
+
+      <div ref={sentinelRef} className="h-12" aria-hidden="true" />
+
+      {loadingMore ? (
+        <div className="text-center text-sm text-slate-400">Loading more activity...</div>
+      ) : null}
+    </div>
+  )
+}