Add a dedicated page to display all FOLX STADL videos

Create a new route and page component for "FOLX STADL" that displays a grid of related videos. 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/DVZN4Rp
2025-08-30 15:54:26 +00:00
parent 1ebfd09b78
commit 31f74b9953
4 changed files with 95 additions and 8 deletions
@@ -0,0 +1,90 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'wouter';
+import { ArrowLeft } from 'lucide-react';
+import VideoCard from '@/components/video-card';
+import VideoModal from '@/components/video-modal';
+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 { data: videos = [], isLoading } = useQuery<Video[]>({
+    queryKey: ['/api/videos']
+  });
+
+  // Filter only FOLX STADL videos
+  const folxStadlVideos = videos.filter(video => 
+    video.title.includes("FOLX STADL S4") || 
+    video.title.includes("FOLXSTADL_S04") ||
+    video.title.includes("FOLX STADL S4 -")
+  );
+
+  const handleVideoClick = (video: Video) => {
+    setSelectedVideo(video);
+    setIsModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+    setSelectedVideo(null);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-bunny-dark flex items-center justify-center">
+        <div className="text-white text-xl">Loading...</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-bunny-dark text-white">
+      {/* Header */}
+      <div className="border-b border-white/10 bg-black/20 backdrop-blur-sm">
+        <div className="max-w-7xl mx-auto px-4 py-4">
+          <div className="flex items-center gap-4">
+            <Link href="/">
+              <button className="flex items-center gap-2 text-bunny-light hover:text-white transition-colors">
+                <ArrowLeft className="w-5 h-5" />
+                <span>Back</span>
+              </button>
+            </Link>
+            <h1 className="text-3xl font-bold text-white uppercase tracking-wide">FOLX STADL</h1>
+          </div>
+        </div>
+      </div>
+
+      {/* Video Grid */}
+      <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
+          {folxStadlVideos.map((video) => (
+            <div key={video.id} className="group">
+              <VideoCard
+                video={video}
+                onClick={handleVideoClick}
+                className="w-full hover:scale-105 transition-all duration-300 group-hover:shadow-2xl rounded-lg overflow-hidden"
+              />
+            </div>
+          ))}
+        </div>
+
+        {folxStadlVideos.length === 0 && (
+          <div className="text-center py-16">
+            <p className="text-bunny-muted text-lg">No FOLX STADL videos found</p>
+          </div>
+        )}
+      </div>
+
+      {/* Video Modal */}
+      {selectedVideo && (
+        <VideoModal
+          video={selectedVideo}
+          isOpen={isModalOpen}
+          onClose={handleCloseModal}
+        />
+      )}
+    </div>
+  );
+}