198 lines
10 KiB
JavaScript
198 lines
10 KiB
JavaScript
import React from 'react'
|
|
|
|
function typeMeta(type) {
|
|
switch (type) {
|
|
case 'upload':
|
|
return { icon: 'fa-solid fa-image', label: 'Upload', tone: 'text-sky-200 bg-sky-400/12 border-sky-300/20' }
|
|
case 'comment':
|
|
return { icon: 'fa-solid fa-comment-dots', label: 'Comment', tone: 'text-amber-100 bg-amber-400/12 border-amber-300/20' }
|
|
case 'reply':
|
|
return { icon: 'fa-solid fa-reply', label: 'Reply', tone: 'text-orange-100 bg-orange-400/12 border-orange-300/20' }
|
|
case 'like':
|
|
return { icon: 'fa-solid fa-heart', label: 'Like', tone: 'text-rose-100 bg-rose-400/12 border-rose-300/20' }
|
|
case 'favourite':
|
|
return { icon: 'fa-solid fa-bookmark', label: 'Favourite', tone: 'text-pink-100 bg-pink-400/12 border-pink-300/20' }
|
|
case 'follow':
|
|
return { icon: 'fa-solid fa-user-plus', label: 'Follow', tone: 'text-emerald-100 bg-emerald-400/12 border-emerald-300/20' }
|
|
case 'achievement':
|
|
return { icon: 'fa-solid fa-trophy', label: 'Achievement', tone: 'text-yellow-100 bg-yellow-400/12 border-yellow-300/20' }
|
|
case 'forum_post':
|
|
return { icon: 'fa-solid fa-signs-post', label: 'Forum thread', tone: 'text-violet-100 bg-violet-400/12 border-violet-300/20' }
|
|
case 'forum_reply':
|
|
return { icon: 'fa-solid fa-comments', label: 'Forum reply', tone: 'text-indigo-100 bg-indigo-400/12 border-indigo-300/20' }
|
|
default:
|
|
return { icon: 'fa-solid fa-bolt', label: 'Activity', tone: 'text-slate-100 bg-white/6 border-white/10' }
|
|
}
|
|
}
|
|
|
|
function profileName(actor) {
|
|
if (!actor) return 'Creator'
|
|
return actor.username ? `@${actor.username}` : actor.name || 'Creator'
|
|
}
|
|
|
|
function headline(activity) {
|
|
switch (activity?.type) {
|
|
case 'upload':
|
|
return activity?.artwork?.title ? `Uploaded ${activity.artwork.title}` : 'Uploaded new artwork'
|
|
case 'comment':
|
|
return activity?.artwork?.title ? `Commented on ${activity.artwork.title}` : 'Posted a new comment'
|
|
case 'reply':
|
|
return activity?.artwork?.title ? `Replied on ${activity.artwork.title}` : 'Posted a reply'
|
|
case 'like':
|
|
return activity?.artwork?.title ? `Liked ${activity.artwork.title}` : 'Liked an artwork'
|
|
case 'favourite':
|
|
return activity?.artwork?.title ? `Favourited ${activity.artwork.title}` : 'Saved an artwork'
|
|
case 'follow':
|
|
return activity?.target_user ? `Started following @${activity.target_user.username || activity.target_user.name}` : 'Started following a creator'
|
|
case 'achievement':
|
|
return activity?.achievement?.name ? `Unlocked ${activity.achievement.name}` : 'Unlocked a new achievement'
|
|
case 'forum_post':
|
|
return activity?.forum?.thread?.title ? `Started forum thread ${activity.forum.thread.title}` : 'Started a new forum thread'
|
|
case 'forum_reply':
|
|
return activity?.forum?.thread?.title ? `Replied in ${activity.forum.thread.title}` : 'Posted a forum reply'
|
|
default:
|
|
return 'Shared new activity'
|
|
}
|
|
}
|
|
|
|
function body(activity) {
|
|
if (activity?.comment?.body) return activity.comment.body
|
|
if (activity?.forum?.post?.excerpt) return activity.forum.post.excerpt
|
|
if (activity?.achievement?.description) return activity.achievement.description
|
|
return ''
|
|
}
|
|
|
|
function cta(activity) {
|
|
if (activity?.comment?.url) return { href: activity.comment.url, label: 'Open comment' }
|
|
if (activity?.artwork?.url) return { href: activity.artwork.url, label: 'View artwork' }
|
|
if (activity?.forum?.post?.url) return { href: activity.forum.post.url, label: 'Open reply' }
|
|
if (activity?.forum?.thread?.url) return { href: activity.forum.thread.url, label: 'Open thread' }
|
|
if (activity?.target_user?.profile_url) return { href: activity.target_user.profile_url, label: 'View profile' }
|
|
return null
|
|
}
|
|
|
|
function AchievementIcon({ achievement }) {
|
|
const raw = String(achievement?.icon || '').trim()
|
|
const className = raw.startsWith('fa-') ? raw : `fa-solid ${raw || 'fa-trophy'}`
|
|
|
|
return (
|
|
<div className="inline-flex h-12 w-12 items-center justify-center rounded-2xl border border-yellow-300/20 bg-yellow-400/12 text-yellow-100">
|
|
<i className={className} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function ActivityCard({ activity }) {
|
|
const meta = typeMeta(activity?.type)
|
|
const nextAction = cta(activity)
|
|
const copy = body(activity)
|
|
|
|
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-5 shadow-[0_18px_45px_rgba(0,0,0,0.28)] backdrop-blur-xl">
|
|
<div className="flex flex-col gap-4 md:flex-row md:items-start">
|
|
<div className="flex items-start gap-4 md:w-[17rem] md:shrink-0">
|
|
<div className="relative h-14 w-14 shrink-0 overflow-hidden rounded-[20px] border border-white/10 bg-slate-950/70">
|
|
{activity?.actor?.avatar_url ? (
|
|
<img src={activity.actor.avatar_url} alt={profileName(activity.actor)} className="h-full w-full object-cover" loading="lazy" />
|
|
) : (
|
|
<div className="flex h-full w-full items-center justify-center text-slate-500">
|
|
<i className="fa-solid fa-user" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-sm font-semibold text-white">{profileName(activity.actor)}</div>
|
|
{activity?.actor?.badge?.label ? (
|
|
<div className="mt-1 inline-flex items-center rounded-full border border-white/10 bg-white/[0.04] px-2 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-slate-300">
|
|
{activity.actor.badge.label}
|
|
</div>
|
|
) : null}
|
|
<div className="mt-2 text-xs uppercase tracking-[0.18em] text-slate-500">{activity?.time_ago || ''}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
|
|
<div className="min-w-0">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className={`inline-flex items-center gap-2 rounded-full border px-2.5 py-1 text-[10px] font-semibold uppercase tracking-[0.18em] ${meta.tone}`}>
|
|
<i className={meta.icon} />
|
|
{meta.label}
|
|
</span>
|
|
</div>
|
|
<h3 className="mt-3 text-lg font-semibold tracking-[-0.02em] text-white">{headline(activity)}</h3>
|
|
{copy ? <p className="mt-2 max-w-3xl text-sm leading-7 text-slate-400">{copy}</p> : null}
|
|
</div>
|
|
|
|
<div className="text-xs text-slate-500 md:text-right">{activity?.created_at ? new Date(activity.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }) : ''}</div>
|
|
</div>
|
|
|
|
{activity?.artwork ? (
|
|
<div className="mt-4 flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
|
|
{activity.artwork.thumb ? (
|
|
<img src={activity.artwork.thumb} alt={activity.artwork.title} className="h-16 w-16 rounded-2xl object-cover ring-1 ring-white/10" loading="lazy" />
|
|
) : (
|
|
<div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-white/10 bg-white/[0.04] text-slate-500">
|
|
<i className="fa-solid fa-image" />
|
|
</div>
|
|
)}
|
|
<div className="min-w-0 flex-1">
|
|
<div className="truncate text-sm font-medium text-white">{activity.artwork.title}</div>
|
|
<div className="mt-2 flex flex-wrap gap-3 text-xs text-slate-400">
|
|
<span>{Number(activity.artwork.stats?.likes || 0).toLocaleString()} likes</span>
|
|
<span>{Number(activity.artwork.stats?.views || 0).toLocaleString()} views</span>
|
|
<span>{Number(activity.artwork.stats?.comments || 0).toLocaleString()} comments</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{activity?.target_user ? (
|
|
<div className="mt-4 flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
|
|
<div className="h-12 w-12 overflow-hidden rounded-2xl border border-white/10 bg-slate-950/70">
|
|
{activity.target_user.avatar_url ? (
|
|
<img src={activity.target_user.avatar_url} alt={activity.target_user.username || activity.target_user.name} className="h-full w-full object-cover" loading="lazy" />
|
|
) : null}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Target creator</div>
|
|
<div className="mt-1 text-sm font-medium text-white">@{activity.target_user.username || activity.target_user.name}</div>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{activity?.achievement ? (
|
|
<div className="mt-4 flex items-center gap-3 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
|
|
<AchievementIcon achievement={activity.achievement} />
|
|
<div className="min-w-0 flex-1">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Achievement unlocked</div>
|
|
<div className="mt-1 text-sm font-medium text-white">{activity.achievement.name}</div>
|
|
{activity.achievement.description ? <div className="mt-1 text-sm text-slate-400">{activity.achievement.description}</div> : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{activity?.forum?.thread ? (
|
|
<div className="mt-4 rounded-2xl border border-white/[0.06] bg-white/[0.03] p-3">
|
|
<div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-500">Forum activity</div>
|
|
<div className="mt-1 text-sm font-medium text-white">{activity.forum.thread.title}</div>
|
|
<div className="mt-2 text-xs text-slate-400">{activity.forum.thread.category_name}</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{nextAction ? (
|
|
<a
|
|
href={nextAction.href}
|
|
className="mt-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.05] px-3.5 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"
|
|
>
|
|
{nextAction.label}
|
|
<i className="fa-solid fa-arrow-right text-[10px]" />
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|