710 lines
29 KiB
TypeScript
710 lines
29 KiB
TypeScript
import {
|
|
ArrowRight,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Clock,
|
|
Eye,
|
|
Filter,
|
|
Grid,
|
|
List,
|
|
Play,
|
|
Search,
|
|
Star,
|
|
Users,
|
|
X
|
|
} from 'lucide-react';
|
|
import { useEffect, useRef, useState } from 'react';
|
|
import { useWebinarListQuery, type WebinarItem } from '../redux/services/webinarApi';
|
|
import { ImageWithFallback } from './figma/ImageWithFallback';
|
|
import { FullScreenLoader } from './FullScreenLoader';
|
|
import { navigateTo } from './Router';
|
|
import { Badge } from './ui/badge';
|
|
import { Button } from './ui/button';
|
|
import { Card, CardContent } from './ui/card';
|
|
import { Input } from './ui/input';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
|
|
import { Slider } from './ui/slider';
|
|
import { WebcastCTABanner } from './WebcastCTABanner';
|
|
|
|
// Status options with proper mapping to API values
|
|
const statusOptions = [
|
|
{ value: 'scheduled', label: '📅 Scheduled', color: 'bg-blue-100 text-blue-800 border-blue-200' },
|
|
{ value: 'live', label: '🔴 Live', color: 'bg-red-100 text-red-800 border-red-200' },
|
|
{ value: 'ended', label: '✅ Ended', color: 'bg-gray-100 text-gray-800 border-gray-200' },
|
|
{ value: 'cancelled', label: '❌ Cancelled', color: 'bg-red-50 text-red-600 border-red-200' }
|
|
];
|
|
|
|
const sortOptions = [
|
|
{ value: 'most_popular', label: 'Most Popular' },
|
|
{ value: 'newest', label: 'Newest First' },
|
|
{ value: 'oldest', label: 'Oldest First' },
|
|
{ value: 'title', label: 'Title A-Z' },
|
|
{ value: 'duration', label: 'Duration' }
|
|
];
|
|
|
|
// Static tags for all webinars
|
|
const staticTags = ['Leadership', 'Executive Development', 'Strategy', 'Innovation', 'Change Management', 'Business Growth', 'Team Building', 'Digital Transformation'];
|
|
|
|
export function Webinars() {
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [selectedCategory, setSelectedCategory] = useState('All Categories');
|
|
const [selectedStatuses, setSelectedStatuses] = useState<string[]>([]);
|
|
const [durationRange, setDurationRange] = useState([0, 120]);
|
|
const [attendeeRange, setAttendeeRange] = useState([0, 5000]);
|
|
const [sortBy, setSortBy] = useState('most_popular');
|
|
const [viewType, setViewType] = useState<'grid' | 'list'>('grid');
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const webinarsPerPage = 6;
|
|
const containerRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Fetch webinars from API
|
|
const {
|
|
data: webinarResponse,
|
|
isLoading,
|
|
isError,
|
|
} = useWebinarListQuery({
|
|
limit: 100,
|
|
offset: 0,
|
|
search: searchTerm || undefined,
|
|
status: selectedStatuses.length > 0 ? selectedStatuses : undefined,
|
|
minDuration: durationRange[0] > 0 ? durationRange[0] : undefined,
|
|
maxDuration: durationRange[1] < 120 ? durationRange[1] : undefined,
|
|
minAttendees: attendeeRange[0] > 0 ? attendeeRange[0] : undefined,
|
|
maxAttendees: attendeeRange[1] < 5000 ? attendeeRange[1] : undefined,
|
|
sortBy: sortBy as any,
|
|
});
|
|
|
|
const webinars = webinarResponse?.data?.items || [];
|
|
|
|
// Get random tags for each webinar (3 random tags from staticTags)
|
|
const getRandomTags = (seed: string) => {
|
|
// Use the webinar ID as seed to get consistent tags for each webinar
|
|
const hash = seed.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
|
const shuffled = [...staticTags];
|
|
for (let i = shuffled.length - 1; i > 0; i--) {
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
|
}
|
|
return shuffled.slice(0, 3);
|
|
};
|
|
|
|
// Get unique categories from API data
|
|
const categories = [
|
|
'All Categories',
|
|
...Array.from(new Set(webinars.map(webinar => webinar.session_title?.split(' ')[0] || 'General')))
|
|
];
|
|
|
|
// Helper functions
|
|
const formatDate = (dateString: string) => {
|
|
return new Date(dateString).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
|
|
const formatDuration = (minutes: number) => {
|
|
if (minutes >= 60) {
|
|
const hours = Math.floor(minutes / 60);
|
|
const remainingMinutes = minutes % 60;
|
|
return remainingMinutes > 0 ? `${hours}h ${remainingMinutes}m` : `${hours}h`;
|
|
}
|
|
return `${minutes}min`;
|
|
};
|
|
|
|
const getStatusBadge = (status: string) => {
|
|
switch (status) {
|
|
case 'live':
|
|
return <Badge className="bg-red-600 text-white animate-pulse">LIVE NOW</Badge>;
|
|
case 'scheduled':
|
|
return <Badge className="bg-blue-600 text-white">SCHEDULED</Badge>;
|
|
case 'ended':
|
|
return <Badge className="bg-gray-600 text-white">ENDED</Badge>;
|
|
case 'cancelled':
|
|
return <Badge className="bg-red-400 text-white">CANCELLED</Badge>;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const getActionText = (status: string) => {
|
|
switch (status) {
|
|
case 'live':
|
|
return 'Join Now';
|
|
case 'scheduled':
|
|
return 'Register';
|
|
case 'ended':
|
|
return 'Watch Recording';
|
|
case 'cancelled':
|
|
return 'Cancelled';
|
|
default:
|
|
return 'Learn More';
|
|
}
|
|
};
|
|
|
|
// Statistics
|
|
const stats = {
|
|
total: webinars.length,
|
|
scheduled: webinars.filter(w => w.webinar_status === 'scheduled').length,
|
|
live: webinars.filter(w => w.webinar_status === 'live').length,
|
|
ended: webinars.filter(w => w.webinar_status === 'ended').length,
|
|
cancelled: webinars.filter(w => w.webinar_status === 'cancelled').length,
|
|
categories: categories.length - 1
|
|
};
|
|
|
|
// Filter webinars
|
|
const filteredWebinars = webinars.filter(webinar => {
|
|
const matchesCategory = selectedCategory === 'All Categories' ||
|
|
(webinar.session_title && webinar.session_title.toLowerCase().includes(selectedCategory.toLowerCase()));
|
|
return matchesCategory;
|
|
});
|
|
|
|
// Paginate results
|
|
const totalPages = Math.ceil(filteredWebinars.length / webinarsPerPage);
|
|
const currentWebinars = filteredWebinars.slice((currentPage - 1) * webinarsPerPage, currentPage * webinarsPerPage);
|
|
|
|
const clearAllFilters = () => {
|
|
setSearchTerm('');
|
|
setSelectedCategory('All Categories');
|
|
setSelectedStatuses([]);
|
|
setDurationRange([0, 120]);
|
|
setAttendeeRange([0, 5000]);
|
|
setSortBy('most_popular');
|
|
};
|
|
|
|
const hasActiveFilters = searchTerm ||
|
|
selectedCategory !== 'All Categories' ||
|
|
selectedStatuses.length > 0 ||
|
|
durationRange[0] !== 0 || durationRange[1] !== 120 ||
|
|
attendeeRange[0] !== 0 || attendeeRange[1] !== 5000;
|
|
|
|
const toggleStatus = (status: string) => {
|
|
setSelectedStatuses(prev =>
|
|
prev.includes(status)
|
|
? prev.filter(s => s !== status)
|
|
: [...prev, status]
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setCurrentPage(1);
|
|
}, [searchTerm, selectedCategory, selectedStatuses, durationRange, attendeeRange, sortBy]);
|
|
|
|
const WebinarCard = ({ webinar }: { webinar: WebinarItem }) => {
|
|
const handleCardClick = () => {
|
|
if (webinar.webinar_status !== 'cancelled') {
|
|
navigateTo(`/webinar/${webinar.id}`);
|
|
}
|
|
};
|
|
|
|
const isCancelled = webinar.webinar_status === 'cancelled';
|
|
const webinarTags = getRandomTags(webinar.id);
|
|
|
|
if (viewType === 'list') {
|
|
return (
|
|
<Card
|
|
className={`mb-4 cursor-pointer transition-all duration-300 hover:shadow-lg hover:transform hover:-translate-y-1 ${isCancelled ? 'opacity-75' : ''}`}
|
|
onClick={handleCardClick}
|
|
style={isCancelled ? { cursor: 'not-allowed' } : {}}
|
|
>
|
|
<CardContent className="p-6">
|
|
<div className="flex gap-6">
|
|
{/* Thumbnail */}
|
|
<div className="flex-shrink-0 w-32 h-24 rounded-lg overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200 flex items-center justify-center">
|
|
<Play className="w-8 h-8 text-gray-400" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="flex-1">
|
|
<div className="flex justify-between items-start mb-2">
|
|
<div className="flex items-center gap-2">
|
|
{getStatusBadge(webinar.webinar_status)}
|
|
</div>
|
|
<span className="text-small text-gray-500">{formatDate(webinar.session_datetime)}</span>
|
|
</div>
|
|
|
|
<h3 className="text-h4 mb-2 line-clamp-2">{webinar.session_title}</h3>
|
|
<p className="text-body text-gray-600 mb-3 line-clamp-2">
|
|
{webinar.description || 'No description available'}
|
|
</p>
|
|
|
|
{/* Tags */}
|
|
<div className="flex flex-wrap gap-2 mb-3">
|
|
{webinarTags.map((tag, idx) => (
|
|
<Badge key={idx} variant="outline" className="text-xs bg-gray-50">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-4 text-small text-gray-500">
|
|
<span className="flex items-center gap-1">
|
|
<Users className="w-4 h-4" />
|
|
{webinar.owner || 'Kautilya Leadership'}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Clock className="w-4 h-4" />
|
|
{formatDuration(webinar.duration_minutes)}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Eye className="w-4 h-4" />
|
|
Max {webinar.max_attendee.toLocaleString()}
|
|
</span>
|
|
</div>
|
|
{!isCancelled && (
|
|
<div className="flex items-center gap-2 font-medium" style={{ color: '#04045b' }}>
|
|
<span className="text-small">{getActionText(webinar.webinar_status)}</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
// Grid View
|
|
return (
|
|
<Card
|
|
className={`cursor-pointer transition-all duration-300 hover:shadow-lg hover:transform hover:-translate-y-2 group overflow-hidden ${isCancelled ? 'opacity-75' : ''}`}
|
|
onClick={handleCardClick}
|
|
style={isCancelled ? { cursor: 'not-allowed' } : {}}
|
|
>
|
|
{/* Image */}
|
|
<div className="aspect-video relative overflow-hidden bg-gradient-to-br from-gray-100 to-gray-200">
|
|
<div className="w-full h-full flex items-center justify-center">
|
|
<Play className="w-12 h-12 text-gray-400" />
|
|
</div>
|
|
|
|
{/* Status Badge */}
|
|
<div className="absolute top-4 left-4">
|
|
{getStatusBadge(webinar.webinar_status)}
|
|
</div>
|
|
|
|
{/* Play Icon Overlay */}
|
|
{!isCancelled && (
|
|
<div className="absolute inset-0 bg-black bg-opacity-40 opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-center justify-center">
|
|
<div className="bg-white bg-opacity-90 rounded-full p-3">
|
|
<Play className="w-6 h-6 text-gray-800" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<CardContent className="p-6">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<Badge variant="secondary" className="text-xs">
|
|
{webinar.recurring_webinar ? 'Recurring' : 'One-time'}
|
|
</Badge>
|
|
<span className="text-small text-gray-500">{formatDate(webinar.session_datetime)}</span>
|
|
</div>
|
|
|
|
<h3 className="text-h4 mb-3 line-clamp-2 group-hover:text-primary transition-colors">
|
|
{webinar.session_title}
|
|
</h3>
|
|
|
|
<p className="text-body text-gray-600 mb-4 line-clamp-2">
|
|
{webinar.description || 'No description available'}
|
|
</p>
|
|
|
|
{/* Tags */}
|
|
<div className="flex flex-wrap gap-2 mb-4">
|
|
{webinarTags.slice(0, 2).map((tag, idx) => (
|
|
<Badge key={idx} variant="outline" className="text-xs bg-gray-50">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-small text-gray-500">
|
|
<Users className="w-4 h-4" />
|
|
<span>{webinar.owner || 'Kautilya Leadership'}</span>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-between text-small text-gray-500">
|
|
<div className="flex items-center gap-1">
|
|
<Clock className="w-4 h-4" />
|
|
<span>{formatDuration(webinar.duration_minutes)}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<Eye className="w-4 h-4" />
|
|
<span>Max {webinar.max_attendee.toLocaleString()}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{!isCancelled && (
|
|
<div className="flex items-center justify-between mt-4 pt-4 border-t">
|
|
<div className="flex items-center gap-1 text-xs text-gray-500">
|
|
{webinar.require_registration && (
|
|
<>
|
|
<Star className="w-3 h-3 text-yellow-500" />
|
|
<span>Registration Required</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-2 font-medium group-hover:translate-x-1 transition-transform" style={{ color: '#04045b' }}>
|
|
<span className="text-small">{getActionText(webinar.webinar_status)}</span>
|
|
<ArrowRight className="w-4 h-4" />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-white">
|
|
<FullScreenLoader text="Loading webinars..." />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (isError) {
|
|
return (
|
|
<div className="min-h-screen flex items-center justify-center bg-white">
|
|
<div className="text-center">
|
|
<p className="text-red-600 mb-4">Error loading webinars. Please try again later.</p>
|
|
<Button onClick={() => window.location.reload()}>Retry</Button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ backgroundColor: '#FFFFFF' }}>
|
|
{/* Hero Section */}
|
|
<section className="relative h-[400px] overflow-hidden">
|
|
<div className="absolute inset-0">
|
|
<ImageWithFallback
|
|
src="https://images.unsplash.com/photo-1652265540589-46f91535337b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxidXNpbmVzcyUyMHByZXNlbnRhdGlvbiUyMHdlYmluYXIlMjBjb25mZXJlbmNlfGVufDF8fHx8MTc1NTg1NDI3MHww&ixlib=rb-4.1.0&q=80&w=1080"
|
|
alt="Professional webinar and conference presentation"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/60" />
|
|
</div>
|
|
|
|
<div className="relative h-full flex flex-col justify-center section-margin-x">
|
|
<div className="text-center">
|
|
<h1 className="text-h1-white mb-6">
|
|
Leadership Webcasts &<br />
|
|
Expert Insights
|
|
</h1>
|
|
<p className="text-body-lg-white max-w-3xl mx-auto">
|
|
Explore our comprehensive collection of expert insights, research, and practical guidance
|
|
to elevate your leadership journey and drive organizational excellence.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="absolute bottom-0 left-0 right-0">
|
|
<div className="bg-black/80 backdrop-blur-sm px-8 py-6">
|
|
<div className="section-margin-x">
|
|
<div className="grid grid-cols-3 gap-8 text-center">
|
|
<div>
|
|
<div className="text-h2-white mb-2">{stats.total}+</div>
|
|
<div className="text-small-white">Expert Webcasts</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-h2-white mb-2">{stats.categories}</div>
|
|
<div className="text-small-white">Categories</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-h2-white mb-2">15,200</div>
|
|
<div className="text-small-white">Total Views</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Search and Controls Section */}
|
|
<section className="py-8" style={{ backgroundColor: '#FFFFFF' }}>
|
|
<div className="section-margin-x">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-6">
|
|
<div className="relative max-w-md flex-1">
|
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
|
<Input
|
|
type="text"
|
|
placeholder="Search webinars..."
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
className="pl-10 pr-4 py-3 text-body rounded-lg border border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 w-full bg-gray-50"
|
|
style={{
|
|
fontSize: 'var(--font-body)',
|
|
fontFamily: 'var(--font-family-base)',
|
|
height: '48px'
|
|
}}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center border border-gray-300 rounded-lg overflow-hidden">
|
|
<button
|
|
onClick={() => setViewType('grid')}
|
|
className={`p-2 transition-colors ${viewType === 'grid'
|
|
? 'text-white'
|
|
: 'bg-white text-gray-600 hover:bg-gray-50'
|
|
}`}
|
|
style={{
|
|
backgroundColor: viewType === 'grid' ? '#04045b' : undefined
|
|
}}
|
|
aria-label="Grid view"
|
|
>
|
|
<Grid className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => setViewType('list')}
|
|
className={`p-2 transition-colors ${viewType === 'list'
|
|
? 'text-white'
|
|
: 'bg-white text-gray-600 hover:bg-gray-50'
|
|
}`}
|
|
style={{
|
|
backgroundColor: viewType === 'list' ? '#04045b' : undefined
|
|
}}
|
|
aria-label="List view"
|
|
>
|
|
<List className="w-4 h-4" />
|
|
</button>
|
|
</div>
|
|
|
|
<Select value={sortBy} onValueChange={setSortBy}>
|
|
<SelectTrigger className="w-40 text-body">
|
|
<SelectValue placeholder="Sort by" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{sortOptions.map((option) => (
|
|
<SelectItem key={option.value} value={option.value}>
|
|
{option.label}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Main Content Section */}
|
|
<section className="pb-16" style={{ backgroundColor: '#FFFFFF' }}>
|
|
<div className="section-margin-x">
|
|
<div className="grid grid-cols-12 gap-8">
|
|
{/* Left Sidebar Filters */}
|
|
<div className="col-span-12 lg:col-span-3">
|
|
<div className="sticky top-4">
|
|
<Card className="bg-white border border-gray-200 rounded-lg shadow-md overflow-hidden">
|
|
<div className="bg-gray-50 px-4 py-3 border-b border-gray-200">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<div className="p-1.5 rounded-md" style={{ backgroundColor: 'rgba(4, 4, 91, 0.1)' }}>
|
|
<Filter className="w-3.5 h-3.5" style={{ color: '#04045b' }} />
|
|
</div>
|
|
<h3 className="text-body font-semibold text-gray-800">Filters</h3>
|
|
</div>
|
|
{hasActiveFilters && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={clearAllFilters}
|
|
className="text-xs px-2 py-1 rounded-md transition-colors"
|
|
>
|
|
<X className="w-3 h-3 mr-1" />
|
|
Clear
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-4">
|
|
<div className="space-y-6">
|
|
{/* Status Filter */}
|
|
<div className="filter-section">
|
|
<label className="block text-small mb-3 font-medium text-gray-700">
|
|
Status
|
|
</label>
|
|
<div className="flex flex-wrap gap-2">
|
|
{statusOptions.map((status) => (
|
|
<button
|
|
key={status.value}
|
|
onClick={() => toggleStatus(status.value)}
|
|
className={`
|
|
px-3 py-1.5 rounded-full text-xs font-medium border transition-all duration-200
|
|
${selectedStatuses.includes(status.value)
|
|
? `${status.color} ring-2 ring-blue-200 shadow-sm`
|
|
: 'bg-gray-50 text-gray-600 border-gray-200 hover:bg-gray-100 hover:border-gray-300'
|
|
}
|
|
`}
|
|
>
|
|
{status.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
{selectedStatuses.length > 0 && (
|
|
<div className="mt-2 text-xs text-gray-500">
|
|
{selectedStatuses.length} selected
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Duration Filter */}
|
|
<div className="filter-section">
|
|
<label className="block text-small mb-3 font-medium text-gray-700">
|
|
Duration (minutes)
|
|
</label>
|
|
<div className="px-2">
|
|
<Slider
|
|
value={durationRange}
|
|
onValueChange={setDurationRange}
|
|
max={120}
|
|
min={0}
|
|
step={5}
|
|
className="w-full"
|
|
/>
|
|
<div className="flex justify-between mt-2 text-xs text-gray-500">
|
|
<span>{durationRange[0]} min</span>
|
|
<span>{durationRange[1]} min</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Attendee Filter */}
|
|
<div className="filter-section">
|
|
<label className="block text-small mb-3 font-medium text-gray-700">
|
|
Max Attendees
|
|
</label>
|
|
<div className="px-2">
|
|
<Slider
|
|
value={attendeeRange}
|
|
onValueChange={setAttendeeRange}
|
|
max={5000}
|
|
min={0}
|
|
step={100}
|
|
className="w-full"
|
|
/>
|
|
<div className="flex justify-between mt-2 text-xs text-gray-500">
|
|
<span>{attendeeRange[0].toLocaleString()}</span>
|
|
<span>{attendeeRange[1].toLocaleString()}+</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Right Main Content */}
|
|
<div className="col-span-12 lg:col-span-9">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="text-body text-gray-600">
|
|
Showing {currentWebinars.length} of {filteredWebinars.length} webinars
|
|
</div>
|
|
<div className="text-small text-gray-500">
|
|
Page {currentPage} of {totalPages}
|
|
</div>
|
|
</div>
|
|
|
|
<div ref={containerRef}>
|
|
{currentWebinars.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<div className="text-gray-400 mb-4">
|
|
<Search className="w-12 h-12 mx-auto mb-4" />
|
|
</div>
|
|
<h3 className="text-h4 mb-2">No webinars found</h3>
|
|
<p className="text-body text-gray-600 mb-4">
|
|
Try adjusting your filters or search terms
|
|
</p>
|
|
{hasActiveFilters && (
|
|
<Button onClick={clearAllFilters}>
|
|
Clear all filters
|
|
</Button>
|
|
)}
|
|
</div>
|
|
) : (
|
|
<>
|
|
{viewType === 'grid' ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 mb-8">
|
|
{currentWebinars.map((webinar) => (
|
|
<WebinarCard key={webinar.id} webinar={webinar} />
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4 mb-8">
|
|
{currentWebinars.map((webinar) => (
|
|
<WebinarCard key={webinar.id} webinar={webinar} />
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Pagination */}
|
|
{totalPages > 1 && (
|
|
<div className="flex items-center justify-center gap-2">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
|
|
disabled={currentPage === 1}
|
|
>
|
|
<ChevronLeft className="w-4 h-4" />
|
|
Previous
|
|
</Button>
|
|
<div className="flex items-center gap-1">
|
|
{Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
|
|
const page = i + 1;
|
|
return (
|
|
<Button
|
|
key={page}
|
|
variant={currentPage === page ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setCurrentPage(page)}
|
|
className="min-w-10"
|
|
style={currentPage === page ? { backgroundColor: '#04045b' } : {}}
|
|
>
|
|
{page}
|
|
</Button>
|
|
);
|
|
})}
|
|
{totalPages > 5 && <span className="px-2">...</span>}
|
|
{totalPages > 5 && (
|
|
<Button
|
|
variant={currentPage === totalPages ? "default" : "outline"}
|
|
size="sm"
|
|
onClick={() => setCurrentPage(totalPages)}
|
|
className="min-w-10"
|
|
style={currentPage === totalPages ? { backgroundColor: '#04045b' } : {}}
|
|
>
|
|
{totalPages}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
Next
|
|
<ChevronRight className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<WebcastCTABanner />
|
|
</div>
|
|
);
|
|
} |