31f74b9953
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
90 lines
2.8 KiB
TypeScript
90 lines
2.8 KiB
TypeScript
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>
|
|
);
|
|
} |