52 lines
2.4 KiB
TypeScript
52 lines
2.4 KiB
TypeScript
import React, { useState } from "react";
|
|
import Image from "next/image";
|
|
import { StaticImport } from "next/dist/shared/lib/get-img-props";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faChevronCircleLeft, faChevronCircleRight } from "@fortawesome/free-solid-svg-icons";
|
|
import IframeResizer from "iframe-resizer-react";
|
|
|
|
interface ContentCarouselProps {
|
|
data: Array<{
|
|
title: String,
|
|
heroImgSrc: string | StaticImport,
|
|
description?: string,
|
|
prototypeIframeURL?: string
|
|
}>
|
|
}
|
|
|
|
const ContentCarousel = ({
|
|
data = []
|
|
}: ContentCarouselProps) => {
|
|
const [pageLength, setPageLength] = useState(data.length)
|
|
const [currentPageIdx, setCurrentPageIdx] = useState(0);
|
|
|
|
const portfolioData = data[currentPageIdx];
|
|
return (
|
|
<div className="flex flex-row justify-between">
|
|
{(currentPageIdx > 0) && <span className="cursor-pointer" onClick={() => setCurrentPageIdx(currentPageIdx - 1)}><FontAwesomeIcon width={50} height={50} icon={faChevronCircleLeft} className="fas fa-chevron-circle-left" style={{ color: "white" }} /></span>}
|
|
<div className={`p-4 ${portfolioData.prototypeIframeURL ? '' : 'px-10'} flex flex-col`}>
|
|
<div className=" w-fit pb-1 mb-8 border-b-2 border-white">{portfolioData.title}</div>
|
|
{portfolioData.heroImgSrc && <div className="mb-8"><Image src={portfolioData.heroImgSrc} alt=""/></div>}
|
|
<div>{portfolioData.description}</div>
|
|
{portfolioData.prototypeIframeURL && <div style={{height: 900, minHeight: '100%'}}>
|
|
{<IframeResizer
|
|
src={portfolioData.prototypeIframeURL}
|
|
log
|
|
style={{
|
|
width: "100%",
|
|
minWidth: "100%",
|
|
minHeight: '100%',
|
|
height: '1px'
|
|
}}
|
|
|
|
frameBorder= "0"
|
|
/>}
|
|
</div>}
|
|
</div>
|
|
{(currentPageIdx < pageLength - 1) && <span className="cursor-pointer" onClick={() => setCurrentPageIdx(currentPageIdx + 1)}><FontAwesomeIcon width={25} height={50} icon={faChevronCircleRight} className="fas fa-chevron-circle-right" style={{ color: "white" }} /></span>}
|
|
</div>
|
|
|
|
);
|
|
};
|
|
|
|
export default ContentCarousel; |