oonyeje-portfolio/components/content/carousel/index.tsx

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">
            {(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 style={{width: '-webkit-fill-available'}} 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: 100, minHeight: '100%'}} className="flex flex-row justify-center">
                    {/* {<embed
                        src={portfolioData.prototypeIframeURL}
                        style={{
                            width: "100%",
                            minWidth: "100%",
                            minHeight: '100%',
                            height: '1px'
                        }}
                    />} */}
                    <Link href={portfolioData.prototypeIframeURL} target="#">
                        {portfolioData.title}
                    </Link>
                </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;