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
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> |
|
); |
|
}
|