57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import ReactionBar from '../comments/ReactionBar'
|
|
|
|
export default function ActivityReactions({ activity, isLoggedIn = false }) {
|
|
const commentId = activity?.comment?.id || null
|
|
const commentUrl = activity?.comment?.url || null
|
|
const artworkUrl = activity?.artwork?.url || null
|
|
const storyUrl = activity?.story?.url || null
|
|
|
|
if (!commentId && !artworkUrl && !storyUrl) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-3 pt-2">
|
|
{commentId ? (
|
|
<ReactionBar
|
|
entityType="comment"
|
|
entityId={commentId}
|
|
initialTotals={activity?.comment?.reactions || {}}
|
|
isLoggedIn={isLoggedIn}
|
|
/>
|
|
) : null}
|
|
|
|
{commentUrl ? (
|
|
<a
|
|
href={commentUrl}
|
|
className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/55 transition hover:border-sky-400/30 hover:bg-sky-500/10 hover:text-sky-200"
|
|
>
|
|
<i className="fa-regular fa-comment-dots" />
|
|
Reply
|
|
</a>
|
|
) : null}
|
|
|
|
{artworkUrl ? (
|
|
<a
|
|
href={artworkUrl}
|
|
className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/55 transition hover:border-white/15 hover:bg-white/[0.07] hover:text-white"
|
|
>
|
|
<i className="fa-regular fa-image" />
|
|
View artwork
|
|
</a>
|
|
) : null}
|
|
|
|
{storyUrl ? (
|
|
<a
|
|
href={storyUrl}
|
|
className="inline-flex items-center gap-1.5 rounded-full border border-white/[0.08] bg-white/[0.03] px-3 py-1.5 text-xs font-medium text-white/55 transition hover:border-white/15 hover:bg-white/[0.07] hover:text-white"
|
|
>
|
|
<i className="fa-regular fa-newspaper" />
|
|
Read story
|
|
</a>
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|