143 lines
6.8 KiB
JavaScript
143 lines
6.8 KiB
JavaScript
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 storyLink = activity?.story?.url
|
|
const storyTitle = activity?.story?.title || 'a story'
|
|
const mentionedUser = activity?.mentioned_user
|
|
const reaction = activity?.reaction
|
|
const commentAuthor = activity?.comment?.author
|
|
const targetUser = activity?.target_user
|
|
|
|
switch (activity?.type) {
|
|
case 'upload':
|
|
if (storyLink) {
|
|
return (
|
|
<p className="text-sm leading-6 text-white/70">
|
|
<span className="font-medium text-white">published </span>
|
|
{storyLink ? <a href={storyLink} className="text-sky-300 hover:text-sky-200">{storyTitle}</a> : <span className="text-white">{storyTitle}</span>}
|
|
</p>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<p className="text-sm leading-6 text-white/70">
|
|
<span className="font-medium text-white">published </span>
|
|
{artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
|
|
</p>
|
|
)
|
|
case 'favorite':
|
|
return (
|
|
<p className="text-sm leading-6 text-white/70">
|
|
<span className="font-medium text-white">favorited </span>
|
|
{artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
|
|
</p>
|
|
)
|
|
case 'follow':
|
|
return (
|
|
<p className="text-sm leading-6 text-white/70">
|
|
<span className="font-medium text-white">followed </span>
|
|
{targetUser?.profile_url ? <a href={targetUser.profile_url} className="text-sky-300 hover:text-sky-200">@{targetUser.username || targetUser.name}</a> : <span className="text-white">another creator</span>}
|
|
</p>
|
|
)
|
|
case 'award':
|
|
return (
|
|
<p className="text-sm leading-6 text-white/70">
|
|
<span className="font-medium text-white">awarded </span>
|
|
{artworkLink ? <a href={artworkLink} className="text-sky-300 hover:text-sky-200">{artworkTitle}</a> : <span className="text-white">{artworkTitle}</span>}
|
|
</p>
|
|
)
|
|
case 'story_like':
|
|
return (
|
|
<p className="text-sm leading-6 text-white/70">
|
|
<span className="font-medium text-white">liked </span>
|
|
{storyLink ? <a href={storyLink} className="text-sky-300 hover:text-sky-200">{storyTitle}</a> : <span className="text-white">{storyTitle}</span>}
|
|
</p>
|
|
)
|
|
case 'story_comment':
|
|
return (
|
|
<p className="text-sm leading-6 text-white/70">
|
|
<span className="font-medium text-white">commented on </span>
|
|
{storyLink ? <a href={storyLink} className="text-sky-300 hover:text-sky-200">{storyTitle}</a> : <span className="text-white">{storyTitle}</span>}
|
|
</p>
|
|
)
|
|
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} story={activity.story} />
|
|
</div>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|