website refactor
This commit is contained in:
@@ -3,29 +3,20 @@
|
||||
import { LeagueCard } from '@/components/leagues/LeagueCardWrapper';
|
||||
import type { LeaguesViewData } from '@/lib/view-data/LeaguesViewData';
|
||||
import { LeagueSummaryViewModel } from '@/lib/view-models/LeagueSummaryViewModel';
|
||||
import {
|
||||
SharedBox,
|
||||
SharedButton,
|
||||
SharedStack,
|
||||
SharedText,
|
||||
SharedIcon,
|
||||
SharedContainer
|
||||
} from '@/components/shared/UIComponents';
|
||||
import { Heading } from '@/ui/Heading';
|
||||
import { Input } from '@/ui/Input';
|
||||
import { Button } from '@/ui/Button';
|
||||
import { Group } from '@/ui/Group';
|
||||
import { Grid } from '@/ui/Grid';
|
||||
import { Container } from '@/ui/Container';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { Section } from '@/ui/Section';
|
||||
import { StatusDot } from '@/ui/StatusDot';
|
||||
import {
|
||||
Award,
|
||||
Clock,
|
||||
Flag,
|
||||
Flame,
|
||||
Globe,
|
||||
Plus,
|
||||
Search,
|
||||
Sparkles,
|
||||
Target,
|
||||
Timer,
|
||||
Trophy,
|
||||
Users,
|
||||
type LucideIcon,
|
||||
} from 'lucide-react';
|
||||
import React from 'react';
|
||||
@@ -77,44 +68,42 @@ export function LeaguesTemplate({
|
||||
onClearFilters,
|
||||
}: LeaguesTemplateProps) {
|
||||
return (
|
||||
<SharedBox minHeight="screen" bg="zinc-950" color="text-zinc-200">
|
||||
<SharedBox maxWidth="7xl" mx="auto" px={{ base: 4, sm: 6, lg: 8 }} py={12}>
|
||||
<Container size="xl" py={12}>
|
||||
<Group direction="column" gap={16} fullWidth>
|
||||
{/* Hero */}
|
||||
<SharedBox as="header" display="flex" flexDirection={{ base: 'col', md: 'row' }} alignItems={{ base: 'start', md: 'end' }} justifyContent="between" gap={8} mb={16}>
|
||||
<SharedStack gap={4}>
|
||||
<SharedBox display="flex" alignItems="center" gap={3} color="text-blue-500">
|
||||
<Trophy size={24} />
|
||||
<SharedText fontSize="xs" weight="bold" uppercase letterSpacing="widest">Competition Hub</SharedText>
|
||||
</SharedBox>
|
||||
<Heading level={1} fontSize="5xl" weight="bold" color="text-white">
|
||||
Find Your <SharedText as="span" color="text-blue-500">Grid</SharedText>
|
||||
<Group direction={{ base: 'column', md: 'row' } as any} align={{ base: 'start', md: 'end' } as any} justify="between" gap={8} fullWidth>
|
||||
<Group direction="column" gap={4}>
|
||||
<Group direction="row" align="center" gap={3}>
|
||||
<Icon icon={Trophy} size={6} intent="primary" />
|
||||
<Text size="xs" weight="bold" uppercase letterSpacing="widest" color="text-primary-accent">Competition Hub</Text>
|
||||
</Group>
|
||||
<Heading level={1} size="5xl" weight="bold">
|
||||
Find Your <Text as="span" color="text-primary-accent">Grid</Text>
|
||||
</Heading>
|
||||
<SharedText color="text-zinc-400" maxWidth="md" leading="relaxed">
|
||||
<Text variant="low" maxWidth="md">
|
||||
From casual sprints to epic endurance battles — discover the perfect league for your racing style.
|
||||
</SharedText>
|
||||
</SharedStack>
|
||||
</Text>
|
||||
</Group>
|
||||
|
||||
<SharedBox display="flex" alignItems="center" gap={4}>
|
||||
<SharedBox display="flex" flexDirection="col" alignItems="end">
|
||||
<SharedText fontSize="2xl" weight="bold" color="text-white" font="mono">{viewData.leagues.length}</SharedText>
|
||||
<SharedText weight="bold" color="text-zinc-500" uppercase letterSpacing="widest" fontSize="10px">Active Leagues</SharedText>
|
||||
</SharedBox>
|
||||
<SharedBox w="px" h="8" bg="zinc-800" />
|
||||
<SharedButton
|
||||
<Group direction="row" align="center" gap={4}>
|
||||
<Group direction="column" align="end">
|
||||
<Text size="2xl" weight="bold" font="mono">{viewData.leagues.length}</Text>
|
||||
<Text weight="bold" variant="low" uppercase letterSpacing="widest" size="xs">Active Leagues</Text>
|
||||
</Group>
|
||||
<StatusDot intent="telemetry" size="lg" />
|
||||
<Button
|
||||
onClick={onCreateLeague}
|
||||
variant="primary"
|
||||
size="lg"
|
||||
icon={<Plus size={16} />}
|
||||
>
|
||||
<SharedStack direction="row" align="center" gap={2}>
|
||||
<Plus size={16} />
|
||||
Create League
|
||||
</SharedStack>
|
||||
</SharedButton>
|
||||
</SharedBox>
|
||||
</SharedBox>
|
||||
Create League
|
||||
</Button>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
{/* Search & Filters */}
|
||||
<SharedBox as="section" display="flex" flexDirection="col" gap={8} mb={12}>
|
||||
<Group direction="column" gap={8} fullWidth>
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search leagues by name, description, or game..."
|
||||
@@ -123,35 +112,29 @@ export function LeaguesTemplate({
|
||||
icon={<Search size={20} />}
|
||||
/>
|
||||
|
||||
<SharedBox as="nav" display="flex" flexWrap="wrap" gap={2}>
|
||||
<Group direction="row" wrap gap={2} fullWidth>
|
||||
{categories.map((category) => {
|
||||
const isActive = activeCategory === category.id;
|
||||
const CategoryIcon = category.icon;
|
||||
return (
|
||||
<SharedButton
|
||||
<Button
|
||||
key={category.id}
|
||||
onClick={() => onCategoryChange(category.id)}
|
||||
variant={isActive ? 'primary' : 'secondary'}
|
||||
size="sm"
|
||||
icon={<CategoryIcon size={14} />}
|
||||
>
|
||||
<SharedStack direction="row" align="center" gap={2}>
|
||||
<SharedBox
|
||||
color={!isActive && category.color ? category.color : undefined}
|
||||
>
|
||||
<CategoryIcon size={14} />
|
||||
</SharedBox>
|
||||
<SharedText>{category.label}</SharedText>
|
||||
</SharedStack>
|
||||
</SharedButton>
|
||||
{category.label}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</SharedBox>
|
||||
</SharedBox>
|
||||
</Group>
|
||||
</Group>
|
||||
|
||||
{/* Grid */}
|
||||
<SharedBox as="main">
|
||||
<Group direction="column" fullWidth>
|
||||
{filteredLeagues.length > 0 ? (
|
||||
<SharedBox display="grid" responsiveGridCols={{ base: 1, md: 2, lg: 3 }} gap={6}>
|
||||
<Grid cols={{ base: 1, md: 2, lg: 3 }} gap={6}>
|
||||
{filteredLeagues.map((league) => (
|
||||
<LeagueCard
|
||||
key={league.id}
|
||||
@@ -159,25 +142,25 @@ export function LeaguesTemplate({
|
||||
onClick={() => onLeagueClick(league.id)}
|
||||
/>
|
||||
))}
|
||||
</SharedBox>
|
||||
</Grid>
|
||||
) : (
|
||||
<SharedBox display="flex" flexDirection="col" alignItems="center" justifyContent="center" py={24} border borderStyle="dashed" borderColor="zinc-800" bg="zinc-900/20">
|
||||
<SharedBox color="text-zinc-800" mb={4}>
|
||||
<Search size={48} />
|
||||
</SharedBox>
|
||||
<Heading level={3} fontSize="xl" weight="bold" color="text-zinc-500">No Leagues Found</Heading>
|
||||
<SharedText color="text-zinc-600" size="sm" mt={2}>Try adjusting your search or filters</SharedText>
|
||||
<SharedButton
|
||||
variant="ghost"
|
||||
style={{ marginTop: '1.5rem' }}
|
||||
onClick={onClearFilters}
|
||||
>
|
||||
Clear All Filters
|
||||
</SharedButton>
|
||||
</SharedBox>
|
||||
<Section variant="dark" padding="lg">
|
||||
<Group direction="column" align="center" justify="center" fullWidth>
|
||||
<Icon icon={Search} size={12} intent="low" />
|
||||
<Heading level={3} weight="bold">No Leagues Found</Heading>
|
||||
<Text variant="low" size="sm">Try adjusting your search or filters</Text>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={onClearFilters}
|
||||
style={{ marginTop: '1.5rem' }}
|
||||
>
|
||||
Clear All Filters
|
||||
</Button>
|
||||
</Group>
|
||||
</Section>
|
||||
)}
|
||||
</SharedBox>
|
||||
</SharedBox>
|
||||
</SharedBox>
|
||||
</Group>
|
||||
</Group>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user