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

fix tournament card size

Browse Source
This commit is contained in:
yohlo
2025-10-04 22:42:00 -05:00
parent 95a50ee7a7
commit d18d148d32
3 changed files with 7 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/features/tournaments/components/podium.tsx
View File

@@ -7,17 +7,7 @@ interface PodiumProps {
}
export const Podium = ({ tournament }: PodiumProps) => {
if (!tournament.first_place) {
return (
<Box p="md">
<Center>
<Text c="dimmed" size="sm">
Podium will appear here when the tournament is over
</Text>
</Center>
</Box>
);
}
if (!tournament.first_place) return;
return (
<Stack gap="xs" px="md">

24
src/features/tournaments/components/tournament-card.tsx
View File

@@ -28,14 +28,6 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
w="100%"
onClick={() => navigate({ to: `/tournaments/${tournament.id}` })}
style={{ borderRadius: "var(--mantine-radius-md)" }}
styles={{
root: {
"&:hover": {
transform: "translateY(-2px)",
transition: "transform 0.15s ease",
},
},
}}
>
<Card
withBorder
@@ -46,19 +38,11 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
transition: "all 0.15s ease",
border: "1px solid var(--mantine-color-default-border)",
}}
styles={{
root: {
"&:hover": {
borderColor: "var(--mantine-primary-color-filled)",
boxShadow: "var(--mantine-shadow-sm)",
},
},
}}
>
<Group justify="space-between" align="center">
<Group gap="md" align="center">
<Avatar
size={95}
size={75}
radius="sm"
name={tournament.name}
contain
@@ -78,7 +62,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
<Stack gap={6} >
{tournament.first_place && (
<Badge
size="md"
size="sm"
radius="md"
variant="filled"
color="yellow"
@@ -96,7 +80,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
)}
{tournament.second_place && (
<Badge
size="md"
size="sm"
radius="md"
color="gray"
variant="filled"
@@ -113,7 +97,7 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
)}
{tournament.third_place && (
<Badge
size="md"
size="sm"
radius="md"
color="orange"
variant="filled"

108
src/features/tournaments/components/tournament-stats.tsx
View File

@@ -14,6 +14,7 @@ import { Tournament } from "@/features/tournaments/types";
import { CrownIcon, MedalIcon, TreeStructureIcon } from "@phosphor-icons/react";
import Avatar from "@/components/avatar";
import ListLink from "@/components/list-link";
import { Podium } from "./podium";
interface TournamentStatsProps {
tournament: Tournament;
@@ -40,111 +41,6 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
});
}, [tournament.team_stats]);
const renderPodium = () => {
if (!isComplete || !tournament.first_place) {
return (
<Box p="md">
<Center>
<Text c="dimmed" size="sm">
Podium will appear here when the tournament is over
</Text>
</Center>
</Box>
);
}
return (
<Stack gap="xs" px="md">
{tournament.first_place && (
<Group
gap="md"
p="md"
style={{
backgroundColor: 'var(--mantine-color-yellow-light)',
borderRadius: 'var(--mantine-radius-md)',
border: '3px solid var(--mantine-color-yellow-outline)',
boxShadow: 'var(--mantine-shadow-md)',
}}
>
<ThemeIcon size="xl" color="yellow" variant="light" radius="xl">
<CrownIcon size={24} />
</ThemeIcon>
<Stack gap={4} style={{ flex: 1 }}>
<Text size="md" fw={600}>
{tournament.first_place.name}
</Text>
<Group gap="xs">
{tournament.first_place.players?.map((player) => (
<Text key={player.id} size="sm" c="dimmed">
{player.first_name} {player.last_name}
</Text>
))}
</Group>
</Stack>
</Group>
)}
{tournament.second_place && (
<Group
gap="md"
p="xs"
style={{
backgroundColor: 'var(--mantine-color-default)',
borderRadius: 'var(--mantine-radius-md)',
border: '2px solid var(--mantine-color-default-border)',
boxShadow: 'var(--mantine-shadow-sm)',
}}
>
<ThemeIcon size="lg" color="gray" variant="light" radius="xl">
<MedalIcon size={20} />
</ThemeIcon>
<Stack gap={4} style={{ flex: 1 }}>
<Text size="sm" fw={600}>
{tournament.second_place.name}
</Text>
<Group gap="xs">
{tournament.second_place.players?.map((player) => (
<Text key={player.id} size="xs" c="dimmed">
{player.first_name} {player.last_name}
</Text>
))}
</Group>
</Stack>
</Group>
)}
{tournament.third_place && (
<Group
gap="md"
p="xs"
style={{
backgroundColor: 'var(--mantine-color-orange-light)',
borderRadius: 'var(--mantine-radius-md)',
border: '2px solid var(--mantine-color-orange-outline)',
boxShadow: 'var(--mantine-shadow-sm)',
}}
>
<ThemeIcon size="lg" color="orange" variant="light" radius="xl">
<MedalIcon size={18} />
</ThemeIcon>
<Stack gap={4} style={{ flex: 1 }}>
<Text size="sm" fw={600}>
{tournament.third_place.name}
</Text>
<Group gap="xs">
{tournament.third_place.players?.map((player) => (
<Text key={player.id} size="xs" c="dimmed">
{player.first_name} {player.last_name}
</Text>
))}
</Group>
</Stack>
</Group>
)}
</Stack>
);
};
const teamStatsWithCalculations = useMemo(() => {
return sortedTeamStats.map((stat) => ({
...stat,
@@ -260,7 +156,7 @@ export const TournamentStats = memo(({ tournament }: TournamentStatsProps) => {
return (
<Container size="100%" px={0}>
<Stack gap="md">
{renderPodium()}
<Podium tournament={tournament} />
<ListLink
label={`View Bracket`}
to={`/tournaments/${tournament.id}/bracket`}