feat: add community activity feed and mentions

2026-03-17 18:26:57 +01:00
parent 2728644477
commit 2119741ba7
15 changed files with 1280 additions and 112 deletions
--- a/resources/js/components/community/ActivityFeed.jsx
+++ b/resources/js/components/community/ActivityFeed.jsx
@@ -0,0 +1,80 @@
+import React from 'react'
+import ActivityCard from './ActivityCard'
+
+function ActivitySkeleton() {
+  return (
+    <div className="space-y-4 animate-pulse">
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div key={index} className="rounded-[28px] border border-white/[0.06] bg-white/[0.025] p-5">
+          <div className="flex flex-col gap-4 sm:flex-row">
+            <div className="flex items-start gap-3 sm:w-[220px]">
+              <div className="h-11 w-11 rounded-2xl bg-white/[0.08]" />
+              <div className="flex-1 space-y-2">
+                <div className="h-3 w-24 rounded bg-white/[0.08]" />
+                <div className="h-2.5 w-16 rounded bg-white/[0.06]" />
+              </div>
+            </div>
+            <div className="flex-1 space-y-3">
+              <div className="h-3 w-4/5 rounded bg-white/[0.08]" />
+              <div className="rounded-2xl border border-white/[0.04] bg-white/[0.02] px-4 py-3">
+                <div className="h-3 w-full rounded bg-white/[0.06]" />
+                <div className="mt-2 h-3 w-3/4 rounded bg-white/[0.05]" />
+              </div>
+              <div className="h-8 w-48 rounded-full bg-white/[0.05]" />
+            </div>
+            <div className="h-[132px] w-full rounded-2xl bg-white/[0.05] sm:w-[120px]" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function EmptyState({ isFiltered }) {
+  return (
+    <div className="rounded-[28px] border border-white/[0.06] bg-white/[0.025] px-6 py-16 text-center">
+      <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-2xl border border-white/[0.06] bg-white/[0.03] text-white/35">
+        <i className="fa-solid fa-wave-square text-xl" />
+      </div>
+      <h3 className="text-lg font-semibold text-white/80">No activity yet</h3>
+      <p className="mx-auto mt-2 max-w-md text-sm leading-6 text-white/45">
+        {isFiltered ? 'This filter has no recent activity right now.' : 'When creators and members interact around artworks, their activity will appear here.'}
+      </p>
+    </div>
+  )
+}
+
+export default function ActivityFeed({
+  activities = [],
+  isLoggedIn = false,
+  loading = false,
+  loadingMore = false,
+  error = null,
+  sentinelRef,
+}) {
+  if (loading && activities.length === 0) {
+    return <ActivitySkeleton />
+  }
+
+  if (!loading && activities.length === 0) {
+    return <EmptyState isFiltered={Boolean(error) === false} />
+  }
+
+  return (
+    <div className="space-y-4">
+      {error ? (
+        <div className="rounded-2xl border border-rose-500/20 bg-rose-500/10 px-4 py-3 text-sm text-rose-200">
+          {error}
+        </div>
+      ) : null}
+
+      {activities.map((activity) => (
+        <ActivityCard key={activity.id} activity={activity} isLoggedIn={isLoggedIn} />
+      ))}
+
+      {loadingMore ? <ActivitySkeleton /> : null}
+
+      <div ref={sentinelRef} className="h-6" aria-hidden="true" />
+    </div>
+  )
+}