kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

various improvements

Browse Source
This commit is contained in:
yohlo
2025-09-17 09:02:20 -05:00
parent c170e1e1fe
commit 498010e3e2
25 changed files with 733 additions and 643 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
src/features/tournaments/components/tournament-list.tsx
View File

@@ -1,9 +1,9 @@
import { Stack, Skeleton, Text, Group, Box, ThemeIcon } from "@mantine/core";
import { List, ListItem, Divider, Skeleton, Text, Group, Box, ThemeIcon, Stack } from "@mantine/core";
import { useNavigate } from "@tanstack/react-router";
import Avatar from "@/components/avatar";
import { TournamentInfo } from "../types";
import { useCallback } from "react";
import { motion, AnimatePresence } from "framer-motion";
import React from "react";
import { TrophyIcon, CalendarIcon, MapPinIcon } from "@phosphor-icons/react";
interface TournamentListProps {
@@ -11,6 +11,50 @@ interface TournamentListProps {
loading?: boolean;
}
interface TournamentListItemProps {
tournament: TournamentInfo;
}
const TournamentListItem = React.memo(({ tournament }: TournamentListItemProps) => {
const startDate = tournament.start_time ? new Date(tournament.start_time) : null;
return (
<Group justify="space-between" w="100%">
<Stack gap={2}>
<Text fw={500} size="sm">
{tournament.name}
</Text>
<Group gap="md">
{tournament.location && (
<Group gap={4}>
<ThemeIcon size="xs" variant="light" radius="sm" color="gray">
<MapPinIcon size={10} />
</ThemeIcon>
<Text size="xs" c="dimmed">
{tournament.location}
</Text>
</Group>
)}
{startDate && !isNaN(startDate.getTime()) && (
<Group gap={4}>
<ThemeIcon size="xs" variant="light" radius="sm" color="gray">
<CalendarIcon size={10} />
</ThemeIcon>
<Text size="xs" c="dimmed">
{startDate.toLocaleDateString(undefined, {
month: 'short',
day: 'numeric',
year: 'numeric'
})}
</Text>
</Group>
)}
</Group>
</Stack>
</Group>
);
});
const TournamentList = ({ tournaments, loading = false }: TournamentListProps) => {
const navigate = useNavigate();
@@ -19,20 +63,23 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
if (loading) {
return (
<Stack gap="sm">
{Array.from({ length: 6 }).map((_, i) => (
<Box key={`skeleton-${i}`} p="md">
<Group gap="md">
<Skeleton height={60} width={60} radius="md" />
<Stack gap="xs" style={{ flex: 1 }}>
<Skeleton height={20} width="60%" />
<Skeleton height={16} width="40%" />
<Skeleton height={16} width="30%" />
</Stack>
</Group>
</Box>
<List>
{Array.from({ length: 5 }).map((_, i) => (
<ListItem
key={`skeleton-${i}`}
py="xs"
icon={<Skeleton height={40} width={40} radius="sm" />}
>
<Stack gap={4}>
<Skeleton height={16} width={200} />
<Group gap="md">
<Skeleton height={12} width={80} />
<Skeleton height={12} width={100} />
</Group>
</Stack>
</ListItem>
))}
</Stack>
</List>
);
}
@@ -50,96 +97,40 @@ const TournamentList = ({ tournaments, loading = false }: TournamentListProps) =
}
return (
<Stack gap="xs">
<AnimatePresence>
{tournaments.map((tournament, index) => {
const startDate = tournament.start_time ? new Date(tournament.start_time) : null;
return (
<motion.div
key={`tournament-${tournament.id}-${index}`}
initial={{ opacity: 0, y: 10 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -10 }}
transition={{ duration: 0.2, delay: index * 0.01 }}
whileHover={{ y: -2 }}
whileTap={{ scale: 0.98 }}
<List>
{tournaments.map((tournament) => (
<>
<ListItem
key={tournament.id}
p="xs"
icon={
<Avatar
radius="sm"
size={40}
name={tournament.name}
src={
tournament.logo
? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
: undefined
}
>
<TrophyIcon size={16} />
</Avatar>
}
style={{ cursor: "pointer" }}
onClick={() => handleClick(tournament.id)}
styles={{
itemWrapper: { width: "100%" },
itemLabel: { width: "100%" }
}}
w="100%"
>
<Box
p="md"
style={{
borderRadius: "var(--mantine-radius-md)",
border: "1px solid var(--mantine-color-gray-3)",
cursor: "pointer",
transition: "all 0.2s ease",
}}
onClick={() => handleClick(tournament.id)}
onMouseEnter={(e) => {
e.currentTarget.style.backgroundColor = "var(--mantine-color-gray-0)";
e.currentTarget.style.borderColor = "var(--mantine-primary-color-filled)";
}}
onMouseLeave={(e) => {
e.currentTarget.style.backgroundColor = "transparent";
e.currentTarget.style.borderColor = "var(--mantine-color-gray-3)";
}}
>
<Group gap="md" wrap="nowrap">
<Avatar
size={60}
radius="md"
name={tournament.name}
src={
tournament.logo
? `/api/files/tournaments/${tournament.id}/${tournament.logo}`
: undefined
}
style={{
border: "2px solid var(--mantine-primary-color-light)",
}}
>
<TrophyIcon size={24} />
</Avatar>
<Stack gap="xs" style={{ flex: 1, minWidth: 0 }}>
<Text fw={600} size="lg" lineClamp={1}>
{tournament.name}
</Text>
<Group gap="lg" wrap="wrap">
{tournament.location && (
<Group gap="xs">
<ThemeIcon size="xs" variant="light" radius="sm">
<MapPinIcon size={12} />
</ThemeIcon>
<Text size="sm" c="dimmed" lineClamp={1}>
{tournament.location}
</Text>
</Group>
)}
{startDate && !isNaN(startDate.getTime()) && (
<Group gap="xs">
<ThemeIcon size="xs" variant="light" radius="sm">
<CalendarIcon size={12} />
</ThemeIcon>
<Text size="sm" c="dimmed">
{startDate.toLocaleDateString(undefined, {
month: 'short',
day: 'numeric',
year: 'numeric'
})}
</Text>
</Group>
)}
</Group>
</Stack>
</Group>
</Box>
</motion.div>
);
})}
</AnimatePresence>
</Stack>
<TournamentListItem tournament={tournament} />
</ListItem>
<Divider />
</>
))}
</List>
);
}