125 lines
4.9 KiB
JavaScript
125 lines
4.9 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { Swiper, SwiperSlide } from 'swiper/react';
|
|
import SwiperCore, { Autoplay, Navigation, Mousewheel, Keyboard } from 'swiper';
|
|
import ProjectCard from './ProjectCard';
|
|
import projects from 'data/ITCreative/projects.json';
|
|
|
|
import "swiper/css";
|
|
import 'swiper/css/autoplay';
|
|
import 'swiper/css/navigation';
|
|
import 'swiper/css/mousewheel';
|
|
import 'swiper/css/keyboard';
|
|
|
|
SwiperCore.use([Autoplay, Navigation, Mousewheel, Keyboard]);
|
|
|
|
const Projects = () => {
|
|
const [load, setLoad] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setTimeout(() => {
|
|
setLoad(true);
|
|
});
|
|
}, []);
|
|
|
|
return (
|
|
<section className="projects style-7 section-padding">
|
|
<div className="content">
|
|
<div className="row">
|
|
<div className="col-lg-3">
|
|
<div className="section-head style-4 mb-50">
|
|
<div className="top-title mb-10">
|
|
<img src="/assets/img/line_l.png" alt="" />
|
|
<h5> Case Study </h5>
|
|
</div>
|
|
<h2 className="">
|
|
Creative <span> Works </span> <br /> We Done
|
|
</h2>
|
|
</div>
|
|
<div className="projects-tabs">
|
|
<ul className="nav nav-pills flex-column mb-3" id="pills-tab" role="tablist">
|
|
{
|
|
projects.types.map((type, index) => (
|
|
<li className="nav-item" role="presentation" key={index}>
|
|
<button className={`nav-link ${index === 0 ? 'active' : ''}`} id={`pills-proj${type.id}-tab`} data-bs-toggle="pill" data-bs-target={`#pills-proj${type.tab}`} type="button" role="tab" aria-controls={`pills-proj${type.tab}`} aria-selected="true">
|
|
<i className="fal fa-long-arrow-right me-2 color-blue7"></i> {type.title}
|
|
</button>
|
|
</li>
|
|
))
|
|
}
|
|
</ul>
|
|
<div className="swiper-button-next">
|
|
<i className="far fa-long-arrow-right"></i>
|
|
</div>
|
|
<div className="swiper-button-prev">
|
|
<i className="far fa-long-arrow-left"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="col-lg-9">
|
|
<div className="tab-content" id="pills-tabContent">
|
|
{
|
|
projects.tabs.map((tab, index) => (
|
|
<div className={`tab-pane fade ${index === 0 ? 'show active' : ''}`} id={`pills-proj${tab.id}`} role="tabpanel" aria-labelledby={`pills-proj${tab.id}-tab`} key={index}>
|
|
<div className="projects-slider7">
|
|
{
|
|
load && (
|
|
<Swiper
|
|
spaceBetween={40}
|
|
speed={1000}
|
|
pagination={false}
|
|
navigation={{
|
|
nextEl: '.projects.style-7 .swiper-button-next',
|
|
prevEl: '.projects.style-7 .swiper-button-prev',
|
|
}}
|
|
mousewheel={false}
|
|
keyboard={true}
|
|
autoplay={{
|
|
delay: 5000,
|
|
}}
|
|
observer={true}
|
|
observeParents={true}
|
|
loop={false}
|
|
breakpoints={{
|
|
0: {
|
|
slidesPerView: 1,
|
|
},
|
|
480: {
|
|
slidesPerView: 1,
|
|
},
|
|
787: {
|
|
slidesPerView: 1,
|
|
},
|
|
991: {
|
|
slidesPerView: 2,
|
|
},
|
|
1200: {
|
|
slidesPerView: 2,
|
|
}
|
|
}}
|
|
>
|
|
{
|
|
tab.projects.map((project, i) => (
|
|
<SwiperSlide key={i}>
|
|
<ProjectCard project={project} />
|
|
</SwiperSlide>
|
|
))
|
|
}
|
|
</Swiper>
|
|
)
|
|
}
|
|
</div>
|
|
</div>
|
|
))
|
|
}
|
|
<a href="#0" className="btn btn-icon-circle rounded-pill bg-white fw-bold mt-50">
|
|
<small> More Projects <i className="fas fa-long-arrow-alt-right bg-light"></i> </small>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|
|
|
|
export default Projects |