58 lines
3.0 KiB
TypeScript
Executable File
58 lines
3.0 KiB
TypeScript
Executable File
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";
|
|
import Link from "next/link";
|
|
|
|
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">
|
|
<div style={{width: '-webkit-fill-available'}} className={`p-4 ${portfolioData.prototypeIframeURL ? '' : 'px-10'} flex flex-col`}>
|
|
<div className="flex flex-row self-auto 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>}
|
|
{(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>
|
|
<div className=" w-fit self-center pb-1 border-b-2 border-white">{portfolioData.title}</div>
|
|
<div>{portfolioData.description}</div>
|
|
{portfolioData.prototypeIframeURL && <div style={{height: 100, minHeight: '100%'}} className="my-4 flex flex-row justify-center">
|
|
{/* {<embed
|
|
src={portfolioData.prototypeIframeURL}
|
|
style={{
|
|
width: "100%",
|
|
minWidth: "100%",
|
|
minHeight: '100%',
|
|
height: '1px'
|
|
}}
|
|
/>} */}
|
|
{portfolioData.heroImgSrc && <Link className="w-full h-full align-middle flex flex-row justify-center" href={portfolioData.prototypeIframeURL} target="#">
|
|
<div className="flex flex-col justify-center">
|
|
<span>
|
|
<div className="mb-8 w-full flex-row flex justify-center bg-white"><Image height={300} width={300} src={portfolioData.heroImgSrc} alt=""/></div>
|
|
</span>
|
|
</div>
|
|
</Link>}
|
|
</div>}
|
|
</div>
|
|
</div>
|
|
|
|
);
|
|
};
|
|
|
|
export default ContentCarousel; |