comments
This commit is contained in:
parent
52b5a490ac
commit
ebc314f638
9 changed files with 226 additions and 33 deletions
|
@ -1,30 +1,67 @@
|
|||
import { PostReaction } from '../posts/posts.ts'
|
||||
import { PostComment, PostReaction } from '../posts/posts.ts'
|
||||
import { Temporal } from '@js-temporal/polyfill'
|
||||
|
||||
interface PostTimelineProps {
|
||||
reactions: PostReaction[]
|
||||
comments: PostComment[]
|
||||
}
|
||||
|
||||
export function PostTimeline({ reactions }: PostTimelineProps) {
|
||||
export function PostTimeline({ reactions, comments }: PostTimelineProps) {
|
||||
const items = [
|
||||
...reactions.map((reaction) => ({
|
||||
timestamp: reaction.reactedOn,
|
||||
component: (
|
||||
<ReactionItem
|
||||
key={'reaction-' + reaction.authorName + reaction.reactedOn.toString()}
|
||||
reaction={reaction}
|
||||
/>
|
||||
),
|
||||
})),
|
||||
...comments.map((comment) => ({
|
||||
timestamp: comment.postedOn,
|
||||
component: (
|
||||
<CommentItem
|
||||
key={'comment-' + comment.author + comment.postedOn.toString()}
|
||||
comment={comment}
|
||||
/>
|
||||
),
|
||||
})),
|
||||
].toSorted((a, b) => Temporal.Instant.compare(a.timestamp, b.timestamp))
|
||||
|
||||
return (
|
||||
<div className={`flex flex-col gap-4 mb-4 px-4`}>
|
||||
{reactions.map((reaction) => (
|
||||
<div className={`flex flex-col`}>
|
||||
<div className={`text-gray-400 text-xs -mb-1`}>
|
||||
{reaction.reactedOn.toLocaleString('en-AU', {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
})}
|
||||
</div>
|
||||
<div className={`flex flex-row items-baseline text-gray-500`}>
|
||||
<span className={`text-gray-400`}>@{reaction.authorName}</span>
|
||||
<span>did</span>
|
||||
<span className={`text-lg`}>{reaction.emoji}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
<div className={`flex flex-col gap-4 mb-4 px-4`}>{items.map((item) => item.component)}</div>
|
||||
)
|
||||
}
|
||||
|
||||
function ReactionItem({ reaction }: { reaction: PostReaction }) {
|
||||
return (
|
||||
<div className={`flex flex-col`}>
|
||||
<div className={`text-gray-400 text-xs -mb-1`}>{formatItemDate(reaction.reactedOn)}</div>
|
||||
<div className={`flex flex-row items-baseline text-gray-400`}>
|
||||
<span>@{reaction.authorName}</span>
|
||||
<span>clicked</span>
|
||||
<span>{reaction.emoji}</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function CommentItem({ comment }: { comment: PostComment }) {
|
||||
return (
|
||||
<div className={`flex flex-col`}>
|
||||
<div className={`text-gray-400 text-xs -mb-1`}>{formatItemDate(comment.postedOn)}</div>
|
||||
<div className={`flex flex-row items-baseline text-gray-500`}>
|
||||
<span className={`text-gray-400`}>@{comment.author}</span>
|
||||
</div>
|
||||
<div className={`ml-1 text-gray-600`}>{comment.content}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function formatItemDate(date: Temporal.Instant) {
|
||||
return date.toLocaleString('en-AU', {
|
||||
year: 'numeric',
|
||||
month: 'numeric',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue