feat: Added Pagination posts section successfully Issue 40

frontend/src/pages/Posts.tsx

@@ -12,6 +12,9 @@ const Posts = () => {
   const [tagInput, setTagInput] = useState('');
   const [filterTags, setFilterTags] = useState<string[]>([]);
   const filterRef = useRef<HTMLDivElement>(null);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [currentPage, setCurrentPage] = useState(1);
+  const postsPerPage = 9;
 
   useEffect(() => {
     const fetchPosts = async () => {
@@ -64,11 +67,33 @@ const Posts = () => {
   };
 
   const filteredPosts = posts.filter(post =>
-    filterTags.every(tag => post.tags.map(t => t.toLowerCase()).includes(tag))
+    filterTags.every(tag => post.tags.map(t => t.toLowerCase()).includes(tag)) &&
+    (post.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+     post.description.toLowerCase().includes(searchQuery.toLowerCase()) ||
+     post.author.username.toLowerCase().includes(searchQuery.toLowerCase()))
   );
 
+  const totalPages = Math.ceil(filteredPosts.length / postsPerPage);
+
+  const currentPosts = filteredPosts.slice(
+    (currentPage - 1) * postsPerPage,
+    currentPage * postsPerPage
+  );
+
+  const handlePreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
   if (loading) {
-    return <Loader/>;
+    return <Loader />;
   }
 
   if (error) {
@@ -126,12 +151,44 @@ const Posts = () => {
             </div>
           </div>
         )}
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.target.value)}
+          placeholder="🔍 Search anything"
+          className="p-2 w-full max-w-xs rounded-md bg-gray-700 text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-full">
-        {filteredPosts.map((post) => (
-          <PostCard post={post} />
+        {currentPosts.map((post, index) => (
+          <PostCard key={index} post={post} />
         ))}
       </div>
+      <div className="flex justify-center items-center mt-4">
+        <button
+          onClick={handlePreviousPage}
+          disabled={currentPage === 1}
+          className={`px-4 py-2 mx-1 text-white rounded ${currentPage === 1 ? 'bg-gray-600 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`}
+        >
+          Previous
+        </button>
+        {[...Array(totalPages)].map((_, index) => (
+          <button
+            key={index}
+            onClick={() => setCurrentPage(index + 1)}
+            className={`px-4 py-2 mx-1 text-white rounded ${currentPage === index + 1 ? 'bg-blue-500' : 'bg-blue-600 hover:bg-blue-700'}`}
+          >
+            {index + 1}
+          </button>
+        ))}
+        <button
+          onClick={handleNextPage}
+          disabled={currentPage === totalPages}
+          className={`px-6 py-2 mx-1 text-white rounded ${currentPage === totalPages ? 'bg-gray-600 cursor-not-allowed' : 'bg-blue-600 hover:bg-blue-700'}`}
+        >
+          Next
+        </button>
+      </div>
     </div>
   );
 };