Dodanie nowych wpisow na bloga

components/sections/PostsGrid.tsx

@@ -5,7 +5,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { Post } from '@/types/types';
 import { cn } from '@/lib/utils';
-import { Calendar, ArrowRight } from 'lucide-react';
+import { Calendar, ArrowRight, ChevronLeft, ChevronRight } from 'lucide-react';
 
 interface PostsGridProps {
   posts: Post[];
@@ -22,22 +22,19 @@ const categories = [
 
 export function PostsGrid({ posts }: PostsGridProps) {
   const [activeCategory, setActiveCategory] = useState('wszystkie');
-  const [visibleCount, setVisibleCount] = useState(POSTS_PER_PAGE);
+  const [currentPage, setCurrentPage] = useState(1);
 
   const filteredPosts = posts.filter(
     (post) => activeCategory === 'wszystkie' || post.category === activeCategory
   );
 
-  const visiblePosts = filteredPosts.slice(0, visibleCount);
-  const hasMore = visibleCount < filteredPosts.length;
-
-  const handleShowMore = () => {
-    setVisibleCount(prev => prev + POSTS_PER_PAGE);
-  };
+  const totalPages = Math.ceil(filteredPosts.length / POSTS_PER_PAGE);
+  const startIndex = (currentPage - 1) * POSTS_PER_PAGE;
+  const visiblePosts = filteredPosts.slice(startIndex, startIndex + POSTS_PER_PAGE);
 
   const handleCategoryChange = (categoryId: string) => {
     setActiveCategory(categoryId);
-    setVisibleCount(POSTS_PER_PAGE); // Reset paginacji przy zmianie kategorii
+    setCurrentPage(1); // Reset paginacji przy zmianie kategorii
   };
 
   const categoryLabels: Record<string, string> = {
@@ -130,14 +127,48 @@ export function PostsGrid({ posts }: PostsGridProps) {
         </div>
       )}
 
-      {/* Pokaż więcej */}
-      {hasMore && (
-        <div className="mt-12 flex justify-center">
-          <button 
-            onClick={handleShowMore}
-            className="btn btn-outline btn-primary bg-white font-bold"
+      {/* Paginacja */}
+      {totalPages > 1 && (
+        <div className="mt-12 flex flex-wrap justify-center items-center gap-2">
+          <button
+            onClick={() => setCurrentPage(p => Math.max(1, p - 1))}
+            disabled={currentPage === 1}
+            className="w-10 h-10 flex items-center justify-center rounded-lg border border-border text-text-muted disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
+            aria-label="Poprzednia strona"
           >
-            Wczytaj więcej artykułów
+            <ChevronLeft className="w-5 h-5" />
+          </button>
+          
+          {Array.from({ length: totalPages }).map((_, i) => {
+            const pageNum = i + 1;
+            // Prosta logika dla mniejszych ekranów (opcjonalnie można ukrywać strony w środku, ale flex-wrap sobie poradzi)
+            return (
+              <button
+                key={i}
+                onClick={() => {
+                  setCurrentPage(pageNum);
+                  // Opcjonalnie: skroluj na górę po zmianie strony
+                  window.scrollTo({ top: 0, behavior: 'smooth' });
+                }}
+                className={cn(
+                  "w-10 h-10 flex items-center justify-center rounded-lg border transition-all duration-300 font-semibold",
+                  currentPage === pageNum 
+                    ? "bg-primary text-white border-primary shadow-md" 
+                    : "bg-white text-text-muted border-border hover:border-primary/30 hover:text-primary"
+                )}
+              >
+                {pageNum}
+              </button>
+            )
+          })}
+          
+          <button
+            onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))}
+            disabled={currentPage === totalPages}
+            className="w-10 h-10 flex items-center justify-center rounded-lg border border-border text-text-muted disabled:opacity-50 disabled:cursor-not-allowed hover:bg-slate-50 transition-colors"
+            aria-label="Następna strona"
+          >
+            <ChevronRight className="w-5 h-5" />
           </button>
         </div>
       )}