Interactive Swipe Progress Tracker

Build a React component that displays real-time visual feedback during swipe gestures, showing the progress and state of the swipe interaction.

Requirements

Create a SwipeProgressTracker component that:

1. Tracks swipe lifecycle states

   • Displays "Ready" when no swipe is active
   • Displays "Swiping..." when a swipe is in progress
   • Displays "Completed!" when a swipe finishes

2. Shows real-time swipe displacement

   • Displays horizontal displacement (X distance) while swiping
   • Displays vertical displacement (Y distance) while swiping
   • Updates these values continuously during the swipe

3. Maintains a swipe counter

   • Increments a counter each time a swipe completes
   • Displays the total number of completed swipes

4. Visual feedback area

   • Provides a swipeable area (minimum 300x300 pixels)
   • Should respond to touch and mouse input

Test Cases

• When the component first renders, it displays "Ready" status and displacement values of 0 @test
• When a swipe begins, the status changes to "Swiping..." @test
• During a swipe, displacement values update to show current X and Y distances @test
• When a swipe completes, the status changes to "Completed!" and the counter increments @test

Implementation

@generates

API

export function SwipeProgressTracker(): JSX.Element;

Dependencies { .dependencies }

react { .dependency }

Provides the React library for building UI components.

react-swipeable { .dependency }

Provides swipe gesture detection and handling.