54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { routes } from '@/lib/routing/RouteConfig';
|
|
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
|
|
import {
|
|
Award,
|
|
Clock,
|
|
Flag,
|
|
Flame,
|
|
Globe,
|
|
Sparkles,
|
|
Target,
|
|
Timer,
|
|
Trophy,
|
|
Users,
|
|
} from 'lucide-react';
|
|
import { useRouter } from 'next/navigation';
|
|
import React, { useState } from 'react';
|
|
import { LeaguesTemplate } from '@/templates/LeaguesTemplate';
|
|
import { LEAGUE_CATEGORIES, CategoryId } from '@/lib/config/leagueCategories';
|
|
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
|
|
|
|
export function LeaguesPageClient({ viewData }: ClientWrapperProps<LeaguesViewData>) {
|
|
const router = useRouter();
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [activeCategory, setActiveCategory] = useState<CategoryId>('all');
|
|
|
|
const filteredLeagues = viewData.leagues.filter((league) => {
|
|
const matchesSearch = !searchQuery ||
|
|
league.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
(league.description ?? '').toLowerCase().includes(searchQuery.toLowerCase());
|
|
|
|
const category = LEAGUE_CATEGORIES.find(c => c.id === activeCategory);
|
|
const matchesCategory = !category || category.filter(league);
|
|
|
|
return matchesSearch && matchesCategory;
|
|
});
|
|
|
|
return (
|
|
<LeaguesTemplate
|
|
viewData={viewData}
|
|
searchQuery={searchQuery}
|
|
onSearchChange={setSearchQuery}
|
|
activeCategory={activeCategory}
|
|
onCategoryChange={setActiveCategory}
|
|
filteredLeagues={filteredLeagues}
|
|
categories={LEAGUE_CATEGORIES}
|
|
onCreateLeague={() => router.push(routes.league.create)}
|
|
onLeagueClick={(id) => router.push(routes.league.detail(id))}
|
|
onClearFilters={() => { setSearchQuery(''); setActiveCategory('all'); }}
|
|
/>
|
|
);
|
|
}
|