dev-chiefworks
108 lines
2.6 KiB
React
108 lines
2.6 KiB
React
'use client'
|
|
|
|
|
|
import React, { useState } from "react";
|
|
import ModalVideo from "react-modal-video";
|
|
import Image from "next/image";
|
|
const VideoGalleryContent = [
|
|
{
|
|
img: "img_84",
|
|
text1: "Promoty",
|
|
text2: "your Event",
|
|
animationDelay: "",
|
|
videoId:'qnwTVQlxs4g'
|
|
},
|
|
{
|
|
img: "img_85",
|
|
text1: "Social Media",
|
|
text2: "Promotion",
|
|
animationDelay: "50",
|
|
videoId:'qnwTVQlxs4g'
|
|
},
|
|
{
|
|
img: "img_86",
|
|
text1: "Youtube Creator",
|
|
text2: "Intro",
|
|
animationDelay: "100",
|
|
videoId:'qnwTVQlxs4g'
|
|
},
|
|
{
|
|
img: "img_87",
|
|
text1: "Dancing",
|
|
text2: "eople adv",
|
|
animationDelay: "150",
|
|
videoId:'qnwTVQlxs4g'
|
|
},
|
|
{
|
|
img: "img_88",
|
|
text1: "Cartoon for",
|
|
text2: "children",
|
|
animationDelay: "50",
|
|
videoId:'qnwTVQlxs4g'
|
|
},
|
|
{
|
|
img: "img_89",
|
|
text1: "Music",
|
|
text2: "Learning",
|
|
animationDelay: "100",
|
|
videoId:'qnwTVQlxs4g'
|
|
},
|
|
{
|
|
img: "img_90",
|
|
text1: "Greeting",
|
|
text2: "intro",
|
|
animationDelay: "150",
|
|
videoId:'qnwTVQlxs4g'
|
|
},
|
|
{
|
|
img: "img_91",
|
|
text1: "Work",
|
|
text2: "From Home",
|
|
animationDelay: "200",
|
|
videoId:'qnwTVQlxs4g'
|
|
},
|
|
];
|
|
|
|
const VideoGallery = () => {
|
|
const [isOpen, setOpen] = useState(false);
|
|
const [videoId, setVideoId] = useState('qnwTVQlxs4g')
|
|
return (
|
|
<div className="row justify-content-center">
|
|
<ModalVideo
|
|
channel="youtube"
|
|
autoplay
|
|
isOpen={isOpen}
|
|
videoId={videoId}
|
|
onClose={() => setOpen(false)}
|
|
/>
|
|
{VideoGalleryContent.map((val, i) => (
|
|
<div
|
|
className="col-xl-3 col-lg-4 col-sm-6"
|
|
data-aos="fade-up"
|
|
data-aos-duration="1200"
|
|
data-aos-delay={val.animationDelay}
|
|
key={i}
|
|
>
|
|
<div className="block-style-twentyOne" onClick={()=>setVideoId(val.videoId)} >
|
|
<Image width={330} height={230} style={{width:'100%',height:'fit-content'}} src={`/images/media/${val.img}.png`} alt="image" className="w-100" />
|
|
<div className="d-flex align-items-center justify-content-center flex-column video-button">
|
|
<span>
|
|
{val.text1} <br /> {val.text2}
|
|
</span>
|
|
<span
|
|
className="icon d-flex align-items-center justify-content-center"
|
|
onClick={() => setOpen(true)}
|
|
>
|
|
<Image width="13" height="17" src="/images/icon/118.svg" alt="image" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{/* /.block-style-twentyOne */}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default VideoGallery;
|