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

use popover over tooltip for badges

Browse Source
This commit is contained in:
yohlo
2025-10-01 14:14:03 -05:00
parent c05fd5dc6d
commit 5729dab35f
1 changed files with 37 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
src/features/badges/components/badge-showcase.tsx
View File

@@ -1,4 +1,4 @@
import { Box, Text, Tooltip, Card } from "@mantine/core";
import { Box, Text, Popover, Card } from "@mantine/core";
import { usePlayerBadges, useAllBadges } from "../queries";
import { useAuth } from "@/contexts/auth-context";
import { Badge, BadgeProgress } from "../types";
@@ -115,9 +115,40 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
}}
>
{badgesToDisplay.map((display) => (
<Tooltip
key={display.badge.id}
label={
<Popover key={display.badge.id} width={220} position="bottom" withArrow shadow="md">
<Popover.Target>
<Card
withBorder
padding="sm"
radius="md"
shadow={display.earned ? "xs" : undefined}
style={(theme) => ({
opacity: display.earned ? 1 : 0.35,
cursor: "pointer",
transition: 'all 0.2s ease',
minHeight: 70,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderStyle: display.earned ? 'solid' : 'dashed',
':hover': {
transform: display.earned ? 'translateY(-2px)' : 'none',
boxShadow: display.earned ? theme.shadows.sm : undefined,
},
})}
>
<Text
size="xs"
ta="center"
fw={display.earned ? 600 : 500}
c={display.earned ? undefined : "dimmed"}
style={{ lineHeight: 1.3 }}
>
{display.badge.name}
</Text>
</Card>
</Popover.Target>
<Popover.Dropdown>
<Box>
<Text size="xs" fw={600} mb={4}>
{display.badge.name}
@@ -131,41 +162,8 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
</Text>
)}
</Box>
}
multiline
w={220}
>
<Card
withBorder
padding="sm"
radius="md"
shadow={display.earned ? "xs" : undefined}
style={(theme) => ({
opacity: display.earned ? 1 : 0.35,
cursor: "pointer",
transition: 'all 0.2s ease',
minHeight: 70,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderStyle: display.earned ? 'solid' : 'dashed',
':hover': {
transform: display.earned ? 'translateY(-2px)' : 'none',
boxShadow: display.earned ? theme.shadows.sm : undefined,
},
})}
>
<Text
size="xs"
ta="center"
fw={display.earned ? 600 : 500}
c={display.earned ? undefined : "dimmed"}
style={{ lineHeight: 1.3 }}
>
{display.badge.name}
</Text>
</Card>
</Tooltip>
</Popover.Dropdown>
</Popover>
))}
</Box>
</Card>