Swipe Gesture Timer

Build a React component that demonstrates timed swipe gestures. The component should respond to quick swipes but ignore slow dragging motions.

Requirements

Create a SwipeTimer component that displays a message area and tracks swipe gestures with timing constraints:

1. The component should display the text "Swipe quickly!" in a swipeable area
2. Quick swipes (completed within 500ms) should update the display to show "Quick swipe detected!" along with the swipe direction (left, right, up, or down)
3. Slow movements that take longer than 500ms should be ignored and not trigger any action
4. When a quick swipe is detected, also display how long the swipe took (in milliseconds)
5. The component should work with both touch and mouse inputs

Test Cases

• Swiping left within 300ms displays "Quick swipe detected! Direction: left, Duration: 300ms" @test
• Swiping right within 450ms displays "Quick swipe detected! Direction: right, Duration: 450ms" @test
• A slow dragging motion that takes 800ms does not update the display text @test
• Swiping up within 200ms displays "Quick swipe detected! Direction: up, Duration: 200ms" @test

Implementation

@generates

API

/**
 * SwipeTimer component that detects quick swipe gestures and ignores slow dragging
 * @returns A React component that displays swipe detection results
 */
export function SwipeTimer(): JSX.Element;

Dependencies { .dependencies }

react-swipeable { .dependency }

Provides swipe gesture detection with configurable timing constraints.

React { .dependency }

Provides component functionality.