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 [showLightbox, toggleShowLightbox] = useState(false)

  const handleCloseLightbox = () => {
    toggleShowLightbox(!showLightbox)
  }

  const onPhotoClick = () => {
    toggleShowLightbox(!showLightbox)
  }

  return (
    <>
      <div>
        {showLightbox ? (
          <Lightbox
              icon="times"
              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

2 entries across 2 versions & 1 rubygems

Version	Path
playbook_ui-12.17.0	app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
playbook_ui-12.16.0.pre.alpha.lightboxcurrentphotoprop531	app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx