34 lines
1.1 KiB
TypeScript
34 lines
1.1 KiB
TypeScript
import React, { useState } from "react";
|
|
import Image from "next/image";
|
|
import { StaticImport } from "next/dist/shared/lib/get-img-props";
|
|
|
|
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>
|
|
<div className="p-4 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>
|
|
<div>{<iframe src={portfolioData.prototypeIframeURL} width="100%" height="100%" frameBorder= "0"></iframe>}</div>
|
|
</div>
|
|
</div>
|
|
|
|
);
|
|
};
|
|
|
|
export default ContentCarousel; |