From 91ffbbc645b296f47fdaf5ea78645f6c59f80dc9 Mon Sep 17 00:00:00 2001
From: sebastjanartic <45803536-sebastjanartic@users.noreply.replit.com>
Date: Sat, 30 Aug 2025 16:15:21 +0000
Subject: [PATCH] Add pagination to display videos across multiple pages

Integrates client-side pagination for the Folx Stadl page, displaying videos in chunks of 10 per page with navigation controls.

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/QQTyNAb
---
 client/src/pages/FolxStadlPage.tsx | 97 +++++++++++++++++++++++++++++-
 1 file changed, 95 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/FolxStadlPage.tsx b/client/src/pages/FolxStadlPage.tsx
index 163d0fc..47773a4 100644
--- a/client/src/pages/FolxStadlPage.tsx
+++ b/client/src/pages/FolxStadlPage.tsx
@@ -1,14 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
 import { Link } from 'wouter';
-import { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, ChevronLeft, ChevronRight } from 'lucide-react';
 import VideoCard from '@/components/video-card';
 import BunnyVideoModal from '@/components/bunny-video-modal';
+import { Button } from '@/components/ui/button';
 import { useState } from 'react';
 import type { Video } from '@shared/schema';
 
 export default function FolxStadlPage() {
   const [selectedVideo, setSelectedVideo] = useState<Video | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const itemsPerPage = 10;
 
   const { data, isLoading } = useQuery<{videos: Video[], total: number}>({
     queryKey: ['/api/videos?limit=200'],
@@ -22,6 +25,12 @@ export default function FolxStadlPage() {
     video.title.includes("FOLX STADL S4")
   );
 
+  // Pagination logic
+  const totalPages = Math.ceil(folxStadlVideos.length / itemsPerPage);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const endIndex = startIndex + itemsPerPage;
+  const currentVideos = folxStadlVideos.slice(startIndex, endIndex);
+
   const handleVideoClick = (video: Video) => {
     setSelectedVideo(video);
     setIsModalOpen(true);
@@ -59,9 +68,38 @@ export default function FolxStadlPage() {
 
       {/* Main Content */}
       <div className="max-w-7xl mx-auto px-4 py-8">
+        {/* Pagination Info */}
+        <div className="mb-6 flex justify-between items-center">
+          <h2 className="text-2xl font-bold text-white">
+            Stran {currentPage} od {totalPages} ({folxStadlVideos.length} oddaj)
+          </h2>
+          <div className="flex gap-2">
+            <Button
+              variant="outline"
+              size="sm"
+              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" />
+              Prejšnja
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => setCurrentPage(Math.min(totalPages, currentPage + 1))}
+              disabled={currentPage === totalPages}
+              className="border-white/20 text-white hover:bg-white/10"
+            >
+              Naslednja
+              <ChevronRight className="w-4 h-4" />
+            </Button>
+          </div>
+        </div>
+
         {/* 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 */}
@@ -94,6 +132,61 @@ export default function FolxStadlPage() {
             </div>
           )}
         </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" />
+              Prejšnja
+            </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"
+            >
+              Naslednja
+              <ChevronRight className="w-4 h-4" />
+            </Button>
+          </div>
+        )}
       </div>
 
       {/* Video Modal */}