Sha256: 328bbb32bcac48229d9c43bb553a9fea400295ccf05a0c7be7d7c7dc1b8d8416
Contents?: true
Size: 1.73 KB
Versions: 27
Compression:
Stored size: 1.73 KB
Contents
/* @flow */
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
import React, { useState } from 'react'
import { Flex, Image } from '../../'
import Lightbox from '../_lightbox.tsx'
const LightboxDefault = (props) => {
const photos = [
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
]
const [selectedPhoto, setSelectedPhoto] = useState(0)
const [showLightbox, toggleShowLightbox] = useState(false)
const handleCloseLightbox = () => {
toggleShowLightbox(!showLightbox)
setSelectedPhoto(null)
}
const onPhotoClick = (photoIndex) => {
toggleShowLightbox(!showLightbox)
setSelectedPhoto(photoIndex)
}
return (
<>
<div>
{showLightbox ? (
<Lightbox
icon="times"
iconSize="2x"
initialPhoto={selectedPhoto}
onClose={handleCloseLightbox}
photos={photos}
showCount={false}
{...props}
/>
) : (
<div className="PhotoViewer">
<Flex>
{photos.map((photo, index) => {
return (
<div
key={photo[index]}
onClick={() => onPhotoClick(index)}
>
<Image
marginRight="xl"
rounded
size="lg"
url={photo}
/>
<div className="overlay" />
</div>
)
})}
</Flex>
</div>
)}
</div>
</>
)
}
export default LightboxDefault
Version data entries
27 entries across 27 versions & 1 rubygems