website refactor
This commit is contained in:
@@ -2,7 +2,6 @@ import React from 'react';
|
||||
import { Trophy, Crown, Users } from 'lucide-react';
|
||||
import type { TeamSummaryViewModel } from '@/lib/view-models/TeamSummaryViewModel';
|
||||
import { getMediaUrl } from '@/lib/utilities/media';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
@@ -75,7 +74,7 @@ export function TopThreePodium({ teams, onClick }: TopThreePodiumProps) {
|
||||
p={0}
|
||||
transition
|
||||
>
|
||||
<Box
|
||||
<Stack
|
||||
bg={getBgColor(position)}
|
||||
rounded="xl"
|
||||
border
|
||||
@@ -85,18 +84,18 @@ export function TopThreePodium({ teams, onClick }: TopThreePodiumProps) {
|
||||
>
|
||||
{/* Crown for 1st place */}
|
||||
{position === 1 && (
|
||||
<Box position="absolute" top="-4" left="1/2" translateX="-1/2">
|
||||
<Box position="relative">
|
||||
<Box animate="pulse">
|
||||
<Stack position="absolute" top="-4" left="1/2" translateX="-1/2">
|
||||
<Stack position="relative">
|
||||
<Stack animate="pulse">
|
||||
<Icon icon={Crown} size={8} color="var(--warning-amber)" />
|
||||
</Box>
|
||||
<Box position="absolute" inset="0" bg="bg-yellow-400" bgOpacity={0.3} blur="md" rounded="full" />
|
||||
</Box>
|
||||
</Box>
|
||||
</Stack>
|
||||
<Stack position="absolute" inset="0" bg="bg-yellow-400" bgOpacity={0.3} blur="md" rounded="full" />
|
||||
</Stack>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{/* Team logo */}
|
||||
<Box h="20" w="20" display="flex" center rounded="xl" bg="bg-deep-graphite" border borderColor="border-charcoal-outline" overflow="hidden" mb={3}>
|
||||
<Stack h="20" w="20" display="flex" center rounded="xl" bg="bg-deep-graphite" border borderColor="border-charcoal-outline" overflow="hidden" mb={3}>
|
||||
<Image
|
||||
src={team.logoUrl || getMediaUrl('team-logo', team.id)}
|
||||
alt={team.name}
|
||||
@@ -104,7 +103,7 @@ export function TopThreePodium({ teams, onClick }: TopThreePodiumProps) {
|
||||
height={80}
|
||||
objectFit="cover"
|
||||
/>
|
||||
</Box>
|
||||
</Stack>
|
||||
|
||||
{/* Team name */}
|
||||
<Text weight="bold" size="sm" color="text-white" textAlign="center" block truncate maxWidth="28">
|
||||
@@ -134,7 +133,7 @@ export function TopThreePodium({ teams, onClick }: TopThreePodiumProps) {
|
||||
<Text size="xs" color="text-gray-400">{team.memberCount}</Text>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user