First commit

src/pages/FeedPage.jsx

@@ -0,0 +1,53 @@
+import { useEffect, useState } from "react";
+
+export function FeedPage({ loadFeed }) {
+  const [items, setItems] = useState([]);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    let mounted = true;
+    loadFeed()
+      .then((data) => {
+        if (mounted) {
+          setItems(data.items || []);
+        }
+      })
+      .catch((err) => {
+        if (mounted) {
+          setError(err.message);
+        }
+      });
+
+    return () => {
+      mounted = false;
+    };
+  }, [loadFeed]);
+
+  return (
+    <section>
+      <header className="page-head">
+        <h2>Community Feed</h2>
+      </header>
+
+      {error ? <p className="error-text">{error}</p> : null}
+
+      <div className="post-list">
+        {items.map((item) => (
+          <article key={item.id} className="panel post-card">
+            <div className="post-top">
+              <img src={item.author?.avatarUrl} alt={item.author?.name} />
+              <div>
+                <p>{item.author?.name}</p>
+                <span>@{item.author?.username}</span>
+              </div>
+            </div>
+            <p>{item.content}</p>
+            <button type="button" className="ghost-btn">
+              Like ({item.likes})
+            </button>
+          </article>
+        ))}
+      </div>
+    </section>
+  );
+}