do feed

src/components/PostsFeed.tsx

@@ -0,0 +1,38 @@
+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>
+  )
+}