sebastjan/videofolxtv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add pagination and sorting to video listings

Browse Source 
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
This commit is contained in:
sebastjanartic 2025-08-30 19:48:39 +00:00
parent 7119dd7b9a
commit ae72ca8609
1 changed files with 56 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
client/src/pages/FolxStadlPage.tsx
View File

@ -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 */}