(rect)
| 11 | |
| 12 | const TutorialOverlay = memo(({ highlightRect, isTransitioning }) => { |
| 13 | const generateClipPath = (rect) => { |
| 14 | if (!rect) return "none"; |
| 15 | |
| 16 | const { top, left, width, height } = rect; |
| 17 | const right = left + width; |
| 18 | const bottom = top + height; |
| 19 | |
| 20 | return `polygon( |
| 21 | 0% 0%, |
| 22 | 0% 100%, |
| 23 | ${left}px 100%, |
| 24 | ${left}px ${top}px, |
| 25 | ${right}px ${top}px, |
| 26 | ${right}px ${bottom}px, |
| 27 | ${left}px ${bottom}px, |
| 28 | ${left}px 100%, |
| 29 | 100% 100%, |
| 30 | 100% 0% |
| 31 | )`; |
| 32 | }; |
| 33 | |
| 34 | return ( |
| 35 | <> |