feat: display user's posts on profile page

src/components/UserPosts.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { usePaginatedQuery } from 'convex/react';
+import { api } from '../../convex/_generated/api';
+import { Doc } from '../../convex/_generated/dataModel';
+import Post from './Post';
+
+export default function UserPosts({ user }: { user: Doc<'users'> }) {
+  const PAGE_SIZE = 10;
+  const pager = usePaginatedQuery(
+    api.posts.getUsersPostById,
+    {
+      userId: user._id,
+    },
+    { initialNumItems: 10 }
+  );
+
+  return (
+    <div className='flex flex-col w-full h-full'>
+      {pager.results.map(post => (
+        <Post
+          key={post._id}
+          post={post}
+        />
+      ))}
+      {pager.isLoading ? (
+        <div>Loading...</div>
+      ) : (
+        <button
+          onClick={() => pager.loadMore(10)}
+          disabled={pager.status !== 'CanLoadMore'}
+        >
+          Load More
+        </button>
+      )}
+    </div>
+  );
+}