From ae72ca8609fa1349f85739885fc3c560fa8163ec Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 19:48:39 +0000
Subject: [PATCH] Add pagination and sorting to video listings

Implements client-side pagination for video content, allowing users to navigate through video lists with "Previous" and "Next" buttons and a page number indicator.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 074b0e4c-6171-43bd-aa98-f9e04623ca14
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/8cc42625-c1f5-4e43-99bd-77f2c4dedee2/074b0e4c-6171-43bd-aa98-f9e04623ca14/Sy6XHzr
---
 client/src/pages/FolxStadlPage.tsx | 57 +++++++++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index ea85e65..49d9b34 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -71,7 +71,7 @@ export default function FolxStadlPage() {
 
         {/* Video List with Descriptions */}
         <div className="space-y-6">
-          {folxStadlVideos.map((video, index) => (
+          {currentVideos.map((video, index) => (
             <div key={video.id} className="bg-black/20 backdrop-blur-sm rounded-lg p-4">
               <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                 {/* Video Card */}
@@ -106,6 +106,61 @@ export default function FolxStadlPage() {
           )}
         </div>
 
+        {/* Bottom Pagination */}
+        {totalPages > 1 && (
+          <div className="mt-8 flex justify-center gap-2">
+            <Button
+              variant="outline"
+              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+              disabled={currentPage === 1}
+              className="border-white/20 text-white hover:bg-white/10"
+            >
+              <ChevronLeft className="w-4 h-4" />
+              Vorherige
+            </Button>
+            
+            <div className="flex gap-1">
+              {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
+                let pageNum;
+                if (totalPages <= 5) {
+                  pageNum = i + 1;
+                } else if (currentPage <= 3) {
+                  pageNum = i + 1;
+                } else if (currentPage >= totalPages - 2) {
+                  pageNum = totalPages - 4 + i;
+                } else {
+                  pageNum = currentPage - 2 + i;
+                }
+                
+                return (
+                  <Button
+                    key={pageNum}
+                    variant={currentPage === pageNum ? "default" : "outline"}
+                    size="sm"
+                    onClick={() => setCurrentPage(pageNum)}
+                    className={currentPage === pageNum 
+                      ? "bg-gradient-to-r from-cyan-400 to-purple-500 text-white" 
+                      : "border-white/20 text-white hover:bg-white/10"
+                    }
+                  >
+                    {pageNum}
+                  </Button>
+                );
+              })}
+            </div>
+
+            <Button
+              variant="outline"
+              onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+              disabled={currentPage === totalPages}
+              className="border-white/20 text-white hover:bg-white/10"
+            >
+              Nächste
+              <ChevronRight className="w-4 h-4" />
+            </Button>
+          </div>
+        )}
+
       </div>
 
       {/* Video Modal */}