Interactive Image Viewer

Build an interactive image viewer component that responds to both tap and swipe gestures. The viewer should display an image and provide different feedback based on how the user interacts with it.

Requirements

When the user taps (quick touch/click) on the image:

• Toggle an info overlay that displays the image title and description
• The overlay should appear/disappear on each tap

When the user swipes left or right on the image:

• Navigate to the previous image (swipe right) or next image (swipe left)
• Update the displayed image accordingly
• Do not toggle the overlay when swiping

Component Interface

Create a React component called ImageViewer that accepts the following props:

interface ImageData {
  url: string;
  title: string;
  description: string;
}

interface ImageViewerProps {
  images: ImageData[];
  initialIndex?: number;
}

The component should:

• Display the current image with appropriate styling
• Show the info overlay when toggled
• Handle navigation between images based on swipes
• Distinguish between taps and swipes correctly

Test Cases

• When the image is tapped once, the info overlay appears @test
• When the image is tapped twice consecutively, the info overlay appears then disappears @test
• When the user swipes left on the image, it navigates to the next image without toggling the overlay @test
• When the user swipes right on the image, it navigates to the previous image without toggling the overlay @test

Implementation

@generates

API

import React from 'react';

interface ImageData {
  url: string;
  title: string;
  description: string;
}

interface ImageViewerProps {
  images: ImageData[];
  initialIndex?: number;
}

export const ImageViewer: React.FC<ImageViewerProps>;

Dependencies { .dependencies }

react-swipeable { .dependency }

Provides touch and swipe gesture handling for React components.

@satisfied-by