Skip to content

Commit ba258a8

Browse files
committed
Enhance RowItem component with hover functionality
- Added hover state management to RowItem, allowing for dynamic display of item count. - Replaced NumberFlow component with a conditional rendering of item count based on hover state for improved user interaction.
1 parent 7fd1e41 commit ba258a8

1 file changed

Lines changed: 9 additions & 2 deletions

File tree

  • client/src/app/[site]/components/shared/StandardSection

client/src/app/[site]/components/shared/StandardSection/Row.tsx

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { FilterParameter } from "@rybbit/shared";
2-
import NumberFlow from "@number-flow/react";
32
import round from "lodash/round";
43
import { ChevronDown, ChevronRight, SquareArrowOutUpRight } from "lucide-react";
54
import { ReactNode, useState, useCallback } from "react";
@@ -52,11 +51,15 @@ const RowItem = ({
5251
onFilterToggle: (parameter: FilterParameter, value: string) => void;
5352
leftContent?: ReactNode;
5453
}) => {
54+
const [isHovered, setIsHovered] = useState(false);
55+
5556
return (
5657
<div
5758
key={getKey(item)}
5859
className="relative h-6 flex items-center cursor-pointer hover:bg-neutral-150/50 dark:hover:bg-neutral-850 group"
5960
onClick={() => onFilterToggle(filterParameter, getValue(item))}
61+
onMouseEnter={() => setIsHovered(true)}
62+
onMouseLeave={() => setIsHovered(false)}
6063
>
6164
<div
6265
className="absolute inset-0 bg-dataviz py-2 opacity-25 rounded-md"
@@ -79,7 +82,11 @@ const RowItem = ({
7982
<div className="hidden group-hover:block text-neutral-600 dark:text-neutral-400">
8083
{round(item.percentage, 1)}%
8184
</div>
82-
<NumberFlow respectMotionPreference={false} value={item.count} format={{ notation: "compact" }} />
85+
<span>
86+
{isHovered
87+
? item.count.toLocaleString()
88+
: item.count.toLocaleString(undefined, { notation: "compact" })}
89+
</span>
8390
</div>
8491
</div>
8592
</div>

0 commit comments

Comments
 (0)