fix: remove row/column dim highlight on Peak Hours hover
This commit is contained in:
@@ -132,10 +132,6 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
|
|||||||
<div className="flex flex-1 gap-[2px]">
|
<div className="flex flex-1 gap-[2px]">
|
||||||
{hours.map((value, hour) => {
|
{hours.map((value, hour) => {
|
||||||
const isHoveredCell = hovered?.day === dayIdx && hovered?.hour === hour
|
const isHoveredCell = hovered?.day === dayIdx && hovered?.hour === hour
|
||||||
const inRow = hovered?.day === dayIdx
|
|
||||||
const inCol = hovered?.hour === hour
|
|
||||||
const highlight = inRow || inCol
|
|
||||||
const dimmed = hovered !== null && !highlight
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
@@ -143,11 +139,10 @@ export default function PeakHours({ siteId, dateRange }: PeakHoursProps) {
|
|||||||
className="flex-1 rounded-[2px] cursor-default"
|
className="flex-1 rounded-[2px] cursor-default"
|
||||||
initial={{ opacity: 0, scale: 0.5 }}
|
initial={{ opacity: 0, scale: 0.5 }}
|
||||||
animate={{
|
animate={{
|
||||||
opacity: dimmed ? 0.3 : 1,
|
|
||||||
scale: isHoveredCell ? 1.3 : 1,
|
scale: isHoveredCell ? 1.3 : 1,
|
||||||
}}
|
}}
|
||||||
transition={
|
transition={
|
||||||
dimmed || isHoveredCell || highlight
|
isHoveredCell
|
||||||
? { duration: 0.12 }
|
? { duration: 0.12 }
|
||||||
: {
|
: {
|
||||||
opacity: { duration: 0.3, delay: (dayIdx * 24 + hour) * 0.003 },
|
opacity: { duration: 0.3, delay: (dayIdx * 24 + hour) * 0.003 },
|
||||||
|
|||||||
Reference in New Issue
Block a user