87 lines
2.8 KiB
React
87 lines
2.8 KiB
React
import React, { useRef } from "react";
|
|
import ProjectCard from "./components/ProjectCard";
|
|
import { Swiper, SwiperSlide } from "swiper/react";
|
|
import { Scrollbar } from "swiper/modules";
|
|
import "swiper/css";
|
|
import "swiper/css/effect-cards";
|
|
import "swiper/css/scrollbar";
|
|
|
|
/*
|
|
* The Projects page or "slide". Implements swiperjs (see documentation at https://swiperjs.com/) to create a nested
|
|
* slider/swiper inside of the root VerticalSlider. This nested slider is horizontal, and displays Project Cards
|
|
* (see /components/ProjectCard.jsx), generated for each element of the parameter cardData.
|
|
*
|
|
* Managed by /App.jsx.
|
|
* Data by /main.jsx.
|
|
*
|
|
* @param cardData json[], each object contains the following: title, descriptionA, featureList, image, url
|
|
*
|
|
* TODO: Cursor icon when hover on the slide buttons should be a pointer, not highlighter.
|
|
*/
|
|
const Projects = ({ cardData }) => {
|
|
// Reference the nested slider instead of the root slider.
|
|
const projectSwiperRef = useRef(null);
|
|
|
|
const prevSlide = () => {
|
|
if (projectSwiperRef.current) {
|
|
projectSwiperRef.current.swiper.slidePrev();
|
|
}
|
|
};
|
|
|
|
const nextSlide = () => {
|
|
if (projectSwiperRef.current) {
|
|
projectSwiperRef.current.swiper.slideNext();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div id="project-section">
|
|
<div id="project-grid-container">
|
|
<div id="projects-header-row">
|
|
<h1>Projects</h1>
|
|
<div id="projects-nav-buttons">
|
|
<div className="slider-nav-button tooltip" onClick={prevSlide}>
|
|
<span className="material-icons project-nav-icon">
|
|
chevron_left
|
|
</span>
|
|
<span className="tooltip-text">Previous Project</span>
|
|
</div>
|
|
|
|
<div className="slider-nav-button tooltip" onClick={nextSlide}>
|
|
<span className="material-icons project-nav-icon">
|
|
chevron_right
|
|
</span>
|
|
<span className="tooltip-text">Next Project</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Swiper
|
|
modules={[Scrollbar]}
|
|
slidesPerView={1}
|
|
loop={false}
|
|
id="project-cards-section"
|
|
className="mySwiper"
|
|
scrollbar={{ hide: false, el: ".swiper-slide" }}
|
|
ref={projectSwiperRef}
|
|
>
|
|
{cardData.map((c, index) => (
|
|
<SwiperSlide key={index}>
|
|
<ProjectCard
|
|
title={c.title}
|
|
description={c.description}
|
|
featureList={c.featureList}
|
|
image={c.image}
|
|
url={c.url}
|
|
/>
|
|
</SwiperSlide>
|
|
))}
|
|
</Swiper>
|
|
</div>
|
|
</div >
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default Projects;
|