xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-06 13:16:06 -06:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace HoverCard with Tooltip in StatusBadge

Browse Source 
Simplifies the status information display by using the lighter-weight
Tooltip component instead of HoverCard, providing more immediate
feedback on hover while maintaining the same functionality.
This commit is contained in:
Xevion
2025-10-23 15:02:54 -05:00
parent a257675bf7
commit 704b8380f6
1 changed files with 15 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/StatusBadge.tsx
View File

@@ -3,7 +3,7 @@ import React from "react";
import type { RdapStatusType } from "@/rdap/schemas";
import { rdapStatusColors, rdapStatusInfo } from "@/rdap/constants";
import { QuestionMarkIcon } from "@radix-ui/react-icons";
import { Badge, HoverCard, Text, Flex } from "@radix-ui/themes";
import { Badge, Tooltip, Flex } from "@radix-ui/themes";
export type StatusBadgeProps = {
status: RdapStatusType;
@@ -11,25 +11,20 @@ export type StatusBadgeProps = {
const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ status }) => {
return (
<HoverCard.Root>
<HoverCard.Trigger>
<Badge
color={rdapStatusColors[status]}
variant="soft"
radius="full"
size="2"
style={{ cursor: "help" }}
>
<Flex align="center" gap="1">
{status}
<QuestionMarkIcon width="12" height="12" />
</Flex>
</Badge>
</HoverCard.Trigger>
<HoverCard.Content maxWidth="400px">
<Text size="2">{rdapStatusInfo[status]}</Text>
</HoverCard.Content>
</HoverCard.Root>
<Tooltip content={rdapStatusInfo[status]}>
<Badge
color={rdapStatusColors[status]}
variant="soft"
radius="full"
size="2"
style={{ cursor: "help" }}
>
<Flex align="center" gap="1">
{status}
<QuestionMarkIcon width="12" height="12" />
</Flex>
</Badge>
</Tooltip>
);
};