xevion/rdap
1
0
Fork 0
mirror of https://github.com/Xevion/rdap.git synced 2025-12-05 23:15:58 -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 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,25 +11,20 @@ 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" radius="full"
radius="full" size="2"
size="2" style={{ cursor: "help" }}
style={{ cursor: "help" }} >
> <Flex align="center" gap="1">
<Flex align="center" gap="1"> {status}
{status} <QuestionMarkIcon width="12" height="12" />
<QuestionMarkIcon width="12" height="12" /> </Flex>
</Flex> </Badge>
</Badge> </Tooltip>
</HoverCard.Trigger>
<HoverCard.Content maxWidth="400px">
<Text size="2">{rdapStatusInfo[status]}</Text>
</HoverCard.Content>
</HoverCard.Root>
); );
}; };