You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

68 lines
2.0 KiB

import React, {useState} from 'react';
import Carousel from 'react-elastic-carousel';
import Video from '../../../QR/VideoBox/React-video-js-player/index';
import exit from '../../../../assets/icons/exit.svg';
import './index.scss';
const Modal = (props) => {
const [displayed, setDisplayed] = useState(props.first ? props.first : props.gallery[0])
const {gallery, setModal} = props;
return(
<>
{
window.innerWidth > 1000 ?
<section className="modal d-flex flex-column align-items-center justify-content-center">
<img className="modal__exit" src={exit} alt="خروح" onClick={() => setModal(null)} />
<div className="modal__display">
{
displayed.type === 'image' ?
<img src={displayed.value} alt=window.t("عکس") /> : null
}
{
displayed.type === 'film' ?
<Video /> : null
}
</div>
<footer className="modal__footer d-flex">
<Carousel
itemsToShow={4}
isRTL={true}
enableTilt={false}
showArrows={true}
pagination={false}
>
{gallery.map((item, i) => (
<Item
data={item}
key={i}
setDisplayed={setDisplayed}
active={item === displayed}
/>
))}
</Carousel>
</footer>
</section> : null
}
</>
);
}
export default Modal;
const Item = (props) => {
return(
<div className="modal-carousel-item">
{
props.data.type === 'image' ?
<img src={props.data.value} alt=window.t("عکس") /> : null
}
{
props.data.type === 'film' ?
<Video /> : null
}
<div style={{ border: props.active ? '4px solid #1BBC6E' : '' }} className="modal-carousel-item__cover" onClick={() => props.setDisplayed(props.data)}>
</div>
</div>
);
}