64 lines
2.9 KiB
JavaScript
64 lines
2.9 KiB
JavaScript
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>
|
|
)
|
|
}
|