website refactor
This commit is contained in:
@@ -1,65 +1,23 @@
|
||||
'use client';
|
||||
|
||||
import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
|
||||
import { routes } from '@/lib/routing/RouteConfig';
|
||||
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
|
||||
import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Input } from '@/ui/Input';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import {
|
||||
Award,
|
||||
Clock,
|
||||
Flag,
|
||||
Flame,
|
||||
Globe,
|
||||
Plus,
|
||||
Search,
|
||||
Sparkles,
|
||||
Target,
|
||||
Timer,
|
||||
Trophy,
|
||||
Users,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
// ============================================================================
|
||||
// TYPES
|
||||
// ============================================================================
|
||||
|
||||
type CategoryId =
|
||||
| 'all'
|
||||
| 'driver'
|
||||
| 'team'
|
||||
| 'nations'
|
||||
| 'trophy'
|
||||
| 'new'
|
||||
| 'popular'
|
||||
| 'openSlots'
|
||||
| 'endurance'
|
||||
| 'sprint';
|
||||
|
||||
interface Category {
|
||||
id: CategoryId;
|
||||
label: string;
|
||||
icon: LucideIcon;
|
||||
description: string;
|
||||
filter: (league: LeaguesViewData['leagues'][number]) => boolean;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
interface LeaguesTemplateProps {
|
||||
viewData: LeaguesViewData;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// CATEGORIES
|
||||
// ============================================================================
|
||||
import { LeaguesTemplate, Category, CategoryId } from '@/templates/LeaguesTemplate';
|
||||
import { ClientWrapperProps } from '@/lib/contracts/components/ComponentContracts';
|
||||
|
||||
const CATEGORIES: Category[] = [
|
||||
{
|
||||
@@ -157,7 +115,7 @@ const CATEGORIES: Category[] = [
|
||||
},
|
||||
];
|
||||
|
||||
export function LeaguesPageClient({ viewData }: LeaguesTemplateProps) {
|
||||
export function LeaguesPageClient({ viewData }: ClientWrapperProps<LeaguesViewData>) {
|
||||
const router = useRouter();
|
||||
const [searchQuery, setSearchQuery] = useState('');
|
||||
const [activeCategory, setActiveCategory] = useState<CategoryId>('all');
|
||||
@@ -174,107 +132,17 @@ export function LeaguesPageClient({ viewData }: LeaguesTemplateProps) {
|
||||
});
|
||||
|
||||
return (
|
||||
<Box minHeight="screen" bg="zinc-950" color="text-zinc-200">
|
||||
<Box maxWidth="7xl" mx="auto" px={{ base: 4, sm: 6, lg: 8 }} py={12}>
|
||||
{/* Hero */}
|
||||
<Box as="header" display="flex" flexDirection={{ base: 'col', md: 'row' }} alignItems={{ base: 'start', md: 'end' }} justifyContent="between" gap={8} mb={16}>
|
||||
<Stack gap={4}>
|
||||
<Box display="flex" alignItems="center" gap={3} color="text-blue-500">
|
||||
<Trophy size={24} />
|
||||
<Text fontSize="xs" weight="bold" uppercase letterSpacing="widest">Competition Hub</Text>
|
||||
</Box>
|
||||
<Heading level={1} fontSize="5xl" weight="bold" color="text-white">
|
||||
Find Your <Text as="span" color="text-blue-500">Grid</Text>
|
||||
</Heading>
|
||||
<Text color="text-zinc-400" maxWidth="md" leading="relaxed">
|
||||
From casual sprints to epic endurance battles — discover the perfect league for your racing style.
|
||||
</Text>
|
||||
</Stack>
|
||||
|
||||
<Box display="flex" alignItems="center" gap={4}>
|
||||
<Box display="flex" flexDirection="col" alignItems="end">
|
||||
<Text fontSize="2xl" weight="bold" color="text-white" font="mono">{viewData.leagues.length}</Text>
|
||||
<Text weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" fontSize="10px">Active Leagues</Text>
|
||||
</Box>
|
||||
<Box w="px" h="8" bg="zinc-800" />
|
||||
<Button
|
||||
onClick={() => router.push(routes.league.create)}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Plus size={16} />
|
||||
Create League
|
||||
</Stack>
|
||||
</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Search & Filters */}
|
||||
<Box as="section" display="flex" flexDirection="col" gap={8} mb={12}>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search leagues by name, description, or game..."
|
||||
value={searchQuery}
|
||||
onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
|
||||
icon={<Search size={20} />}
|
||||
/>
|
||||
|
||||
<Box as="nav" display="flex" flexWrap="wrap" gap={2}>
|
||||
{CATEGORIES.map((category) => {
|
||||
const isActive = activeCategory === category.id;
|
||||
const CategoryIcon = category.icon;
|
||||
return (
|
||||
<Button
|
||||
key={category.id}
|
||||
onClick={() => setActiveCategory(category.id)}
|
||||
variant={isActive ? 'primary' : 'secondary'}
|
||||
size="sm"
|
||||
>
|
||||
<Stack direction="row" align="center" gap={2}>
|
||||
<Box
|
||||
color={!isActive && category.color ? category.color : undefined}
|
||||
>
|
||||
<CategoryIcon size={14} />
|
||||
</Box>
|
||||
<Text>{category.label}</Text>
|
||||
</Stack>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{/* Grid */}
|
||||
<Box as="main">
|
||||
{filteredLeagues.length > 0 ? (
|
||||
<Box display="grid" responsiveGridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
|
||||
{filteredLeagues.map((league) => (
|
||||
<LeagueCard
|
||||
key={league.id}
|
||||
league={league as unknown as LeagueSummaryViewModel}
|
||||
onClick={() => router.push(routes.league.detail(league.id))}
|
||||
/>
|
||||
))}
|
||||
</Box>
|
||||
) : (
|
||||
<Box display="flex" flexDirection="col" alignItems="center" justifyContent="center" py={24} border borderStyle="dashed" borderColor="zinc-800" bg="zinc-900/20">
|
||||
<Box color="text-zinc-800" mb={4}>
|
||||
<Search size={48} />
|
||||
</Box>
|
||||
<Heading level={3} fontSize="xl" weight="bold" color="text-zinc-500">No Leagues Found</Heading>
|
||||
<Text color="text-zinc-600" size="sm" mt={2}>Try adjusting your search or filters</Text>
|
||||
<Button
|
||||
variant="ghost"
|
||||
mt={6}
|
||||
onClick={() => { setSearchQuery(''); setActiveCategory('all'); }}
|
||||
>
|
||||
Clear All Filters
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<LeaguesTemplate
|
||||
viewData={viewData}
|
||||
searchQuery={searchQuery}
|
||||
onSearchChange={setSearchQuery}
|
||||
activeCategory={activeCategory}
|
||||
onCategoryChange={setActiveCategory}
|
||||
filteredLeagues={filteredLeagues}
|
||||
categories={CATEGORIES}
|
||||
onCreateLeague={() => router.push(routes.league.create)}
|
||||
onLeagueClick={(id) => router.push(routes.league.detail(id))}
|
||||
onClearFilters={() => { setSearchQuery(''); setActiveCategory('all'); }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user