38 lines
1 KiB
TypeScript
38 lines
1 KiB
TypeScript
import { Post } from '../model/posts/posts.ts'
|
|
import { Temporal } from '@js-temporal/polyfill'
|
|
|
|
interface PostsFeedProps {
|
|
posts: Post[]
|
|
}
|
|
|
|
export function PostsFeed({ posts }: PostsFeedProps) {
|
|
const formatDate = (date: Temporal.PlainDateTime) => {
|
|
return date.toLocaleString('en-US', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 w-full">
|
|
{posts.map((post) => (
|
|
<article className="w-full p-4 " key={post.postId}>
|
|
<div className="text-sm text-gray-500 mb-3">{formatDate(post.createdAt)}</div>
|
|
|
|
<div className="text-gray-800 mb-4 whitespace-pre-wrap">{post.content}</div>
|
|
|
|
{post.media.length > 0 && (
|
|
<div className="grid gap-4 grid-cols-1">
|
|
{post.media.map((src) => (
|
|
<img key={src} src={src} alt="" className="w-full h-auto" loading="lazy" />
|
|
))}
|
|
</div>
|
|
)}
|
|
</article>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|