function ContentDisplayCenter({ children }) { return /*#__PURE__*/ React.createElement("main", { className: "flex flex-grow justify-center items-center py-8", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, children); } function ContentDisplayCenterStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ContentDisplayCenter, { __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./example-photo.jpg", alt: "example content centered", className: "w-[400px] h-[300px]", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement(ContentDisplayCenter, { __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("video", { controls: true, className: "w-[600px] h-[400px]", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: "./example-video.mp4", type: "video/mp4", __source: { fileName: "", lineNumber: 17, columnNumber: 11 }, __self: this })))); } function MainComponent() { const [activeSection, setActiveSection] = React.useState("photos"); const sections = [ { id: "videos", title: "Videos" }, { id: "moodboards", title: "Mood Boards" }, { id: "inspiration", title: "Inspiration" }, { id: "photos", title: "Photos" } ]; const images = [ { src: "/images/outfit1.jpg", alt: "An outfit showing a casual style" }, { src: "/images/outfit2.jpg", alt: "An outfit showcasing a formal style" }, { src: "/images/outfit3.jpg", alt: "An outfit displaying a sporty style" } ]; const renderContent = ()=>{ switch(activeSection){ case "videos": return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-300", __source: { fileName: "", lineNumber: 20, columnNumber: 16 }, __self: this }); case "moodboards": return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-300", __source: { fileName: "", lineNumber: 22, columnNumber: 16 }, __self: this }); case "inspiration": return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] bg-gray-300", __source: { fileName: "", lineNumber: 24, columnNumber: 16 }, __self: this }); case "photos": return /*#__PURE__*/ React.createElement("div", { className: "w-full h-[400px] flex overflow-hidden relative", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, images.map((image, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: image.src, alt: image.alt, className: "w-full h-full object-cover absolute transition-transform duration-500 ease-linear", style: { transform: `translateX(-${index * 100}%)` }, __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }))); default: return null; } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col bg-gray-100 min-h-screen font-roboto", __source: { fileName: "", lineNumber: 45, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full flex flex-col items-center px-4 py-2 bg-white shadow-lg", __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center w-full", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "/images/logo.png", alt: "Bloom Closet logo", className: "w-[50px] h-[50px] object-contain", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "ml-4 flex justify-center w-full", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this }, "Bloom Closet"))), /*#__PURE__*/ React.createElement("nav", { className: "w-full mt-2", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex justify-center space-x-4", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, sections.map((section)=>/*#__PURE__*/ React.createElement("li", { key: section.id, __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>setActiveSection(section.id), className: `text-lg ${activeSection === section.id ? 'text-black' : 'text-gray-700'}`, name: section.id, __source: { fileName: "", lineNumber: 57, columnNumber: 17 }, __self: this }, section.title)))))), /*#__PURE__*/ React.createElement("main", { className: "flex flex-grow justify-center items-center py-8", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, renderContent()), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, ` @keyframes slide { 0% { transform: translateX(0); } 33% { transform: translateX(-100%); } 66% { transform: translateX(-200%); } 100% { transform: translateX(-300%); } } .w-full.h-full.object-cover.absolute { animation: slide 15s infinite; } `)); }