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