feat: add community activity feed and mentions

resources/js/components/community/ActivityCard.jsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import ActivityAvatar from './ActivityAvatar'
+import ActivityArtworkPreview from './ActivityArtworkPreview'
+import ActivityReactions from './ActivityReactions'
+
+function ActivityHeadline({ activity }) {
+  const artworkLink = activity?.artwork?.url
+  const artworkTitle = activity?.artwork?.title || 'an artwork'
+  const mentionedUser = activity?.mentioned_user
+  const reaction = activity?.reaction
+  const commentAuthor = activity?.comment?.author
+
+  switch (activity?.type) {
+    case 'comment':
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">commented on </span>
+          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
+        </p>
+      )
+    case 'reply':
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">replied on </span>
+          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
+        </p>
+      )
+    case 'reaction':
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">reacted {reaction?.emoji || '👍'} {reaction?.label || 'Like'} </span>
+          <span>to </span>
+          {commentAuthor?.profile_url ? <a href={commentAuthor.profile_url} className="text-sky-300 hover:text-sky-200">{commentAuthor.name || commentAuthor.username || 'a creator'}</a> : <span className="text-white">a creator</span>}
+          <span> on </span>
+          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
+        </p>
+      )
+    case 'mention':
+      return (
+        <p className="text-sm leading-6 text-white/70">
+          <span className="font-medium text-white">mentioned </span>
+          {mentionedUser?.profile_url ? <a href={mentionedUser.profile_url} className="text-sky-300 hover:text-sky-200">@{mentionedUser.username || mentionedUser.name}</a> : <span className="text-white">someone</span>}
+          <span> on </span>
+          {artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
+        </p>
+      )
+    default:
+      return <p className="text-sm leading-6 text-white/70">Shared new activity.</p>
+  }
+}
+
+export default function ActivityCard({ activity, isLoggedIn = false }) {
+  return (
+    <article className="rounded-[28px] border border-white/[0.06] bg-[linear-gradient(180deg,rgba(11,16,26,0.96),rgba(7,11,19,0.92))] p-4 shadow-[0_18px_45px_rgba(0,0,0,0.28)] backdrop-blur-xl sm:p-5">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-start">
+        <div className="sm:w-[220px] sm:shrink-0">
+          <ActivityAvatar user={activity.user} />
+        </div>
+
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-2">
+            <ActivityHeadline activity={activity} />
+            <span className="text-[11px] uppercase tracking-[0.18em] text-white/25">{activity.time_ago || ''}</span>
+          </div>
+
+          {activity.comment?.body ? (
+            <div className="mt-3 rounded-2xl border border-white/[0.06] bg-white/[0.025] px-4 py-3">
+              <p className="whitespace-pre-line break-words text-sm leading-6 text-white/80">{activity.comment.body}</p>
+            </div>
+          ) : null}
+
+          {activity.type === 'mention' && activity.mentioned_user ? (
+            <div className="mt-3 inline-flex items-center gap-2 rounded-full border border-sky-400/20 bg-sky-500/10 px-3 py-1 text-xs text-sky-200">
+              <i className="fa-solid fa-at" />
+              Mentioned @{activity.mentioned_user.username || activity.mentioned_user.name}
+            </div>
+          ) : null}
+
+          <ActivityReactions activity={activity} isLoggedIn={isLoggedIn} />
+        </div>
+
+        <div className="sm:ml-auto">
+          <ActivityArtworkPreview artwork={activity.artwork} />
+        </div>
+      </div>
+    </article>
+  )
+}