feat: make feed the primary page

app/page.tsx

@@ -1,3 +1,30 @@
-const Home = () => <h1>main content</h1>;
+import { collection, getDocs } from "firebase/firestore";
 
-export default Home;
+import FeedPage from "../components/feed/FeedPage";
+
+import db from "./firebase";
+
+import type { FeedItemContent } from "../components/feed/FeedPage";
+
+async function getData() {
+  const items = collection(db, "feed_content");
+
+  const itemsSnapshot = await getDocs(items);
+
+  return itemsSnapshot.docs.map(
+    (doc) => ({ id: doc.id, data: doc.data() } as FeedItemContent)
+  );
+}
+
+const Feed = async () => {
+  const data = await getData();
+
+  return (
+    <div>
+      <h1 className="normal-case font-bold">Feed</h1>
+      <FeedPage data={data} />
+    </div>
+  );
+};
+
+export default Feed;

app/profile/page.tsx

@@ -1,10 +1,12 @@
 import { collection, query, where, getDocs } from "firebase/firestore";
 import { unstable_getServerSession } from "next-auth";
 
+import FeedPage from "../../components/feed/FeedPage";
 import { authOptions } from "../../pages/api/auth/[...nextauth]";
-import FeedPage from "../feed/FeedPage";
 import db from "../firebase";
 
+import type { FeedItemContent } from "../../components/feed/FeedPage";
+
 // TODO SOPHIE FIX THIS (make it a utility function so we can use it in other places)
 const getUser = async () => {
   const session = await unstable_getServerSession(authOptions);
@@ -17,11 +19,6 @@ const getUser = async () => {
   return user;
 };
 
-export type FeedItemRename = {
-  id: string;
-  data: { username: string; content: string };
-};
-
 async function getData() {
   const user = await getUser();
   // change to profile's username
@@ -32,7 +29,7 @@ async function getData() {
   const qSnapshot = await getDocs(q);
 
   return qSnapshot.docs.map(
-    (doc) => ({ id: doc.id, data: doc.data() } as FeedItemRename)
+    (doc) => ({ id: doc.id, data: doc.data() } as FeedItemContent)
   );
 }
 

app/feed/FeedItem.tsx → components/feed/FeedItem.tsx

@@ -1,5 +1,3 @@
-import "../globals.css";
-
 import LikeButton from "./LikeButton";
 
 const FeedItem = ({

app/feed/FeedPage.tsx → components/feed/FeedPage.tsx

@@ -1,8 +1,11 @@
 import FeedItem from "./FeedItem";
 
-import type { FeedItemRename } from "../profile/page";
+export type FeedItemContent = {
+  id: string;
+  data: { username: string; content: string };
+};
 
-const FeedPage = ({ data }: { data: FeedItemRename[] }) => (
+const FeedPage = ({ data }: { data: FeedItemContent[] }) => (
   <div>
     <div className="divider" />
     <ul>

app/feed/LikeButton.tsx → components/feed/LikeButton.tsx

@@ -22,15 +22,15 @@ const LikeButton = ({ filled = false }: { filled?: boolean }) => {
     return (
       <svg
         onClick={onClick}
-        fill="white"
+        fill="black"
         width="24"
         height="24"
         viewBox="0 0 24 24"
         xmlns="http://www.w3.org/2000/svg"
       >
         <path
           d="M5.57256 9.09995L9.2306 1C9.95823 1 10.6561 1.28446 11.1706 1.79081C11.6851 2.29715 11.9741 2.9839 11.9741 3.69998V7.29996H17.1503C17.4154 7.297 17.678 7.35081 17.9199 7.45765C18.1618 7.5645 18.3772 7.72182 18.5512 7.91872C18.7251 8.11562 18.8535 8.34739 18.9275 8.59798C19.0014 8.84856 19.0191 9.11197 18.9793 9.36995L17.7173 17.4699C17.6511 17.8991 17.4296 18.2903 17.0935 18.5715C16.7574 18.8527 16.3293 19.0048 15.8882 18.9999H5.57256M5.57256 9.09995V18.9999M5.57256 9.09995H2.82902C2.34394 9.09995 1.87872 9.28959 1.53571 9.62715C1.1927 9.96472 1 10.4226 1 10.8999V17.1999C1 17.6773 1.1927 18.1351 1.53571 18.4727C1.87872 18.8102 2.34394 18.9999 2.82902 18.9999H5.57256"
-          stroke="black"
+          stroke="white"
           strokeWidth="2"
           strokeLinecap="round"
           strokeLinejoin="round"
@@ -41,15 +41,15 @@ const LikeButton = ({ filled = false }: { filled?: boolean }) => {
   return (
     <svg
       onClick={onClick}
-      fill="black"
+      fill="white"
       width="24"
       height="24"
       viewBox="0 0 24 24"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
         d="M5.57256 9.09995L9.2306 1C9.95823 1 10.6561 1.28446 11.1706 1.79081C11.6851 2.29715 11.9741 2.9839 11.9741 3.69998V7.29996H17.1503C17.4154 7.297 17.678 7.35081 17.9199 7.45765C18.1618 7.5645 18.3772 7.72182 18.5512 7.91872C18.7251 8.11562 18.8535 8.34739 18.9275 8.59798C19.0014 8.84856 19.0191 9.11197 18.9793 9.36995L17.7173 17.4699C17.6511 17.8991 17.4296 18.2903 17.0935 18.5715C16.7574 18.8527 16.3293 19.0048 15.8882 18.9999H5.57256M5.57256 9.09995V18.9999M5.57256 9.09995H2.82902C2.34394 9.09995 1.87872 9.28959 1.53571 9.62715C1.1927 9.96472 1 10.4226 1 10.8999V17.1999C1 17.6773 1.1927 18.1351 1.53571 18.4727C1.87872 18.8102 2.34394 18.9999 2.82902 18.9999H5.57256"
-        stroke="white"
+        stroke="black"
         strokeWidth="2"
         strokeLinecap="round"
         strokeLinejoin="round"

components/ui/Navbar.tsx

@@ -18,7 +18,7 @@ const NavbarItem = ({ item }: { item: ItemType }) => (
 const navbarItems = [
   {
     label: "Feed",
-    url: "/feed",
+    url: "/",
   },
   {
     label: "Profile",