PhotosCarousel PhotoSlide.tsx

0% Statements 0/5

0% Branches 0/4

0% Functions 0/2

0% Lines 0/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import React, { useState } from 'react';
 
import BusySpinner from '../BusySpinner';
import type { PhotoItem } from './index';
 
interface PhotoSlideProps {
  photo: PhotoItem;
  index: number;
  total: number;
  selected: boolean;
}
 
const PhotoSlide = ({ photo, index, total, selected }: PhotoSlideProps) => {
  const [isLoading, setIsLoading] = useState(true);
  const finishLoading = () => setIsLoading(false);
 
  return (
    <div className='embla__slide' role='group' aria-roledescription='slide' aria-label={`${index + 1} of ${total}`}>
      {isLoading && <BusySpinner noBackground={true} />}
      <a href={photo.url} target='_blank' rel='noopener noreferrer' tabIndex={selected ? 0 : -1}>
        <img
          className='embla__slide__img'
          src={photo.url}
          alt={photo.alt}
          onLoad={finishLoading}
          onError={finishLoading}
        />
      </a>
    </div>
  );
};
 
export default PhotoSlide;