posts by user in profile page added

pixelplace/src/components/Profile/Profile.js

@@ -1,8 +1,25 @@
+import { collection, onSnapshot, query, where } from "firebase/firestore";
+import { useEffect, useState } from "react";
 import { useUserAuth } from "../../context/UserAuthContext";
+import { db } from "../../firebase";
+import PostItem from "../PostItem/PostItem";
 
 const Profile = () => {
     const { user } = useUserAuth();
+    const [posts, setPosts] = useState([]);
     const likes = 4;
+    useEffect(() => {
+        const q = query(collection(db, "Posts"), where("ownerId", "==", user.uid));
+        onSnapshot(
+            q,
+            (snapshot) => {
+                const posts = snapshot.docs.map((post) => ({ postId: post.id, ...post.data() }));
+                setPosts(posts);
+            },
+            (err) => console.log(err)
+        );
+    }, [user]);
+
     return (
         <div>
             <div className="flex flex-col font-mono gap-4 relative z-20 w-full max-w-xs sm:max-w-sm md:max-w-lg lg:max-w-3xl xl:max-w-3xl 2xl:max-w-7xl mx-auto h-screen pt-[0%] md:pt-[5%]">
@@ -18,9 +35,13 @@ const Profile = () => {
                         <p className="text-xl mt-4">Total likes: {likes}</p>
                     </div>
                 </div>
-                <div className="w-1/2">
-                    <h2 className="text-4xl font-bold">Your Posts:</h2>
-
+                    <h2 className="text-4xl mb-4 font-bold">Your Posts:</h2>
+                <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 align  gap-4">
+                    {posts.map((post) => (
+                        <div className=" w-full">
+                            <PostItem key={post.postId} {...post} user={user} />
+                        </div>
+                    ))}
                 </div>
             </div>
         </div>