xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-06 03:16:07 -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

11
src/components/StatusBadge.tsx
View File

@@ -3,7 +3,7 @@ import React from "react";
import type { RdapStatusType } from "@/rdap/schemas"; import type { RdapStatusType } from "@/rdap/schemas";
import { rdapStatusColors, rdapStatusInfo } from "@/rdap/constants"; import { rdapStatusColors, rdapStatusInfo } from "@/rdap/constants";
import { QuestionMarkIcon } from "@radix-ui/react-icons"; 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 = { export type StatusBadgeProps = {
status: RdapStatusType; status: RdapStatusType;
@@ -11,8 +11,7 @@ export type StatusBadgeProps = {
const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ status }) => { const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ status }) => {
return ( return (
<HoverCard.Root> <Tooltip content={rdapStatusInfo[status]}>
<HoverCard.Trigger>
<Badge <Badge
color={rdapStatusColors[status]} color={rdapStatusColors[status]}
variant="soft" variant="soft"
@@ -25,11 +24,7 @@ const StatusBadge: FunctionComponent<StatusBadgeProps> = ({ status }) => {
<QuestionMarkIcon width="12" height="12" /> <QuestionMarkIcon width="12" height="12" />
</Flex> </Flex>
</Badge> </Badge>
</HoverCard.Trigger> </Tooltip>
<HoverCard.Content maxWidth="400px">
<Text size="2">{rdapStatusInfo[status]}</Text>
</HoverCard.Content>
</HoverCard.Root>
); );
}; };