autodoload

src/components/PostsFeed.tsx

@@ -1,38 +0,0 @@
-import { Post } from '../model/posts/posts.ts'
-import { Temporal } from '@js-temporal/polyfill'
-
-interface PostsFeedProps {
-  posts: Post[]
-}
-
-export default function PostsFeed({ posts }: PostsFeedProps) {
-  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>
-  )
-}
-
-function formatDate(date: Temporal.PlainDateTime) {
-  return date.toLocaleString('en-US', {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-  })
-}

src/components/PostsList.tsx

@@ -0,0 +1,16 @@
+import { Post } from '../model/posts/posts.ts'
+import PostItem from './PostItem'
+
+interface PostsFeedProps {
+  posts: Post[]
+}
+
+export default function PostsList({ posts }: PostsFeedProps) {
+  return (
+    <div className="flex flex-col gap-6 w-full">
+      {posts.map((post) => (
+        <PostItem key={post.postId} post={post} />
+      ))}
+    </div>
+  )
+}