function MainComponent({ images }) { const [currentImage, setCurrentImage] = React.useState(0); const nextImage = ()=>{ setCurrentImage((prevIndex)=>(prevIndex + 1) % images.length); }; const prevImage = ()=>{ setCurrentImage((prevIndex)=>(prevIndex - 1 + images.length) % images.length); }; return /*#__PURE__*/ React.createElement("div", { className: "relative w-full h-screen overflow-hidden", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute inset-0", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: images[currentImage], alt: `hero shot ${currentImage + 1}`, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: prevImage, className: "absolute left-0 top-1/2 transform -translate-y-1/2 text-white text-2xl p-2", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-left", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: nextImage, className: "absolute right-0 top-1/2 transform -translate-y-1/2 text-white text-2xl p-2", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-arrow-right", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "absolute bottom-4 left-1/2 transform -translate-x-1/2 flex space-x-2", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: `h-2 w-2 rounded-full ${index === currentImage ? "bg-white" : "bg-gray-400"}`, __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this })))); } function StoryComponent() { const images = [ "/images/hero1.jpg", "/images/hero2.jpg", "/images/hero3.jpg" ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { images: images, __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this })); }