144 lines
4.4 KiB
TypeScript
144 lines
4.4 KiB
TypeScript
import Link from "next/link";
|
|
import parser from "html-react-parser";
|
|
import Slider from "react-slick";
|
|
|
|
import {
|
|
getProjects,
|
|
getRunningQueriesThunk,
|
|
useGetProjectQuery,
|
|
} from "@/services/portfolio";
|
|
import { wrapper } from "@/lib/redux";
|
|
import Internal from "@/components/common/Internal";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import Image from "next/image";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import {
|
|
faArrowLeft,
|
|
faArrowRight,
|
|
faSpinner,
|
|
} from "@fortawesome/free-solid-svg-icons";
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
export const getStaticProps = wrapper.getStaticProps(
|
|
(store) => async (context) => {
|
|
store.dispatch(getProjects.initiate());
|
|
const [projects] = await Promise.all(
|
|
store.dispatch(getRunningQueriesThunk())
|
|
);
|
|
|
|
return {
|
|
props: {
|
|
projects: projects.data,
|
|
},
|
|
revalidate: 50,
|
|
};
|
|
}
|
|
);
|
|
|
|
export default function Portfolio({ projects }: any): JSX.Element {
|
|
const [selectedID, setSelectedID] = useState<string | undefined>("");
|
|
const [carouselChange, setCarouselChange] = useState<number>(0);
|
|
const { data: project, isLoading } = useGetProjectQuery(selectedID);
|
|
const customSlider = useRef<any>();
|
|
const [sliderSettings, setSliderSettings] = useState({
|
|
adaptiveHeight: true,
|
|
speed: 500,
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
centerMode: true,
|
|
beforeChange: (current: any, next: any) => {
|
|
setCarouselChange(current);
|
|
},
|
|
});
|
|
|
|
const nextSlide = () => customSlider.current.slickNext();
|
|
const previousSlide = () => customSlider.current.slickPrev();
|
|
|
|
useEffect(() => {
|
|
const element = document.getElementsByClassName("slick-current")[0];
|
|
const ID = element.querySelector("img")?.dataset.projectid;
|
|
setSelectedID(ID);
|
|
}, [carouselChange]);
|
|
return (
|
|
<Internal>
|
|
<div className="container mt-32 mb-12">
|
|
{/*
|
|
// @ts-ignore */}
|
|
<Slider
|
|
{...sliderSettings}
|
|
ref={customSlider}
|
|
>
|
|
{projects.map(({ id, acm_fields }: any) => (
|
|
<div
|
|
className="md:px-2 outline-none"
|
|
key={id}
|
|
>
|
|
<img
|
|
alt={acm_fields?.featured_media?.alt_text}
|
|
data-projectid={id}
|
|
src={acm_fields.featuredProjectImage.source_url}
|
|
className="block rounded-lg mx-auto"
|
|
/>
|
|
</div>
|
|
))}
|
|
</Slider>
|
|
<div className="md:w-3/4 mt-6 md:mx-auto">
|
|
{!isLoading && project.acm_fields ? (
|
|
<>
|
|
<div className="text-center mb-6">
|
|
<Button
|
|
className=""
|
|
asChild
|
|
>
|
|
<Link
|
|
href={project?.acm_fields?.projectLink}
|
|
target="_blank"
|
|
>
|
|
View Project
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
<h1 className="flex flex-col md:flex-row md:items-center text-center md:text-left text-4xl md:text-[64px] text-primary md:mb-6 font-sans">
|
|
<span className="leading-[4rem] font-bold">
|
|
{project?.acm_fields?.title}
|
|
</span>
|
|
<div className="inline-flex gap-4 items-center justify-center text-3xl mb-4 md:mb-0 text-foreground">
|
|
<FontAwesomeIcon
|
|
aria-label="Previous Slide"
|
|
title="Previous Slide"
|
|
onClick={previousSlide}
|
|
className="cusor-pointer p-4"
|
|
icon={faArrowLeft}
|
|
/>
|
|
<FontAwesomeIcon
|
|
aria-label="Next Slide"
|
|
title="Next Slide"
|
|
onClick={nextSlide}
|
|
className="cusor-pointer p-4"
|
|
icon={faArrowRight}
|
|
/>
|
|
</div>
|
|
</h1>
|
|
<div>
|
|
{!isLoading && project.acm_fields
|
|
? parser(project?.acm_fields?.portfolioContent, {
|
|
trim: true,
|
|
})
|
|
: null}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="text-center">
|
|
<FontAwesomeIcon
|
|
spin
|
|
size="2xl"
|
|
icon={faSpinner}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Internal>
|
|
);
|
|
}
|