65 lines
1.9 KiB
Python
65 lines
1.9 KiB
Python
import React, { Fragment } from 'react';
|
|
import { Button, Card, CardBody } from 'reactstrap';
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
import FalconCardHeader from '../common/FalconCardHeader';
|
|
import LightBoxGallery from '../common/LightBoxGallery';
|
|
import img1 from '../../assets/img/generic/4.jpg';
|
|
import img2 from '../../assets/img/generic/5.jpg';
|
|
import img3 from '../../assets/img/gallery/4.jpg';
|
|
import img4 from '../../assets/img/gallery/5.jpg';
|
|
import FalconEditor from '../common/FalconEditor';
|
|
import PageHeader from '../common/PageHeader';
|
|
|
|
const lightBoxGalleryCode = `<LightBoxGallery images={images}>
|
|
{openImgIndex => (
|
|
<Row noGutters className="m-n1">
|
|
{images.map((src, index) => (
|
|
<Col xs={6} className="p-1" key={index}>
|
|
<img
|
|
className="rounded w-100 cursor-pointer"
|
|
src={images[index]}
|
|
alt=""
|
|
onClick={() => {
|
|
openImgIndex(index);
|
|
}}
|
|
/>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
)}
|
|
</LightBoxGallery>`;
|
|
|
|
const ImageLightbox = () => {
|
|
const images = [img1, img2, img3, img4];
|
|
|
|
return (
|
|
<Fragment>
|
|
<PageHeader
|
|
title="React Image Lightbox"
|
|
description="A flexible lightbox component for displaying images in a React project."
|
|
className="mb-3"
|
|
>
|
|
<Button
|
|
tag="a"
|
|
href="https://frontend-collective.github.io/react-image-lightbox"
|
|
target="_blank"
|
|
color="link"
|
|
size="sm"
|
|
className="pl-0"
|
|
>
|
|
React Image Lightbox Documentation
|
|
<FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
|
|
</Button>
|
|
</PageHeader>
|
|
<Card>
|
|
<FalconCardHeader title="Example" />
|
|
<CardBody>
|
|
<FalconEditor code={lightBoxGalleryCode} scope={{ LightBoxGallery, images }} language="jsx" />
|
|
</CardBody>
|
|
</Card>
|
|
</Fragment>
|
|
);
|
|
};
|
|
|
|
export default ImageLightbox;
|