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

42
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 { usePlayerBadges, useAllBadges } from "../queries";
import { useAuth } from "@/contexts/auth-context"; import { useAuth } from "@/contexts/auth-context";
import { Badge, BadgeProgress } from "../types"; import { Badge, BadgeProgress } from "../types";
@@ -115,26 +115,8 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
}} }}
> >
{badgesToDisplay.map((display) => ( {badgesToDisplay.map((display) => (
<Tooltip <Popover key={display.badge.id} width={220} position="bottom" withArrow shadow="md">
key={display.badge.id} <Popover.Target>
label={
<Box>
<Text size="xs" fw={600} mb={4}>
{display.badge.name}
</Text>
<Text size="xs" mb={4}>
{display.badge.description}
</Text>
{isCurrentUser && (
<Text size="xs" c="dimmed">
Progress: {display.progressText}
</Text>
)}
</Box>
}
multiline
w={220}
>
<Card <Card
withBorder withBorder
padding="sm" padding="sm"
@@ -165,7 +147,23 @@ const BadgeShowcase = ({ playerId }: BadgeShowcaseProps) => {
{display.badge.name} {display.badge.name}
</Text> </Text>
</Card> </Card>
</Tooltip> </Popover.Target>
<Popover.Dropdown>
<Box>
<Text size="xs" fw={600} mb={4}>
{display.badge.name}
</Text>
<Text size="xs" mb={4}>
{display.badge.description}
</Text>
{isCurrentUser && (
<Text size="xs" c="dimmed">
Progress: {display.progressText}
</Text>
)}
</Box>
</Popover.Dropdown>
</Popover>
))} ))}
</Box> </Box>
</Card> </Card>