Sha256: 0874e155728ea27abc0cdfd2fec3666c7ae741c933f353a98804ef9aafb4bb35
Contents?: true
Size: 1.65 KB
Versions: 910
Compression:
Stored size: 1.65 KB
Contents
import React, { useState } from 'react'
import { Flex, Image } from 'playbook-ui'
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"
initialPhoto={selectedPhoto}
onClose={handleCloseLightbox}
photos={photos}
{...props}
/>
) : (
<div className="PhotoViewer">
<Flex>
{photos.map((photo, index) => {
return (
<div
key={photo[index]}
onClick={() => onPhotoClick(index)}
>
<Image
cursor="pointer"
marginRight="xl"
rounded
size="lg"
url={photo}
/>
<div className="overlay" />
</div>
)
})}
</Flex>
</div>
)}
</div>
</>
)
}
export default LightboxDefault
Version data entries
910 entries across 910 versions & 2 rubygems