function MainComponent() { const [currentSlide, setCurrentSlide] = React.useState(0); const [hairstyles] = React.useState([ 'images/hairstyle1.jpg', 'images/hairstyle2.jpg', 'images/hairstyle3.jpg', 'images/hairstyle4.jpg', 'images/hairstyle5.jpg' ]); const [showStylist, setShowStylist] = React.useState(false); const [intervalId, setIntervalId] = React.useState(null); const stylists = [ 'Stylist Anna', 'Stylist Ben', 'Stylist Cathy', 'Stylist Dave', 'Stylist Ellen' ]; React.useEffect(()=>{ const newIntervalId = setInterval(()=>{ setCurrentSlide((prev)=>prev < hairstyles.length - 1 ? prev + 1 : 0); }, 3000); setIntervalId(newIntervalId); return ()=>{ clearInterval(newIntervalId); }; }, [ hairstyles.length ]); const selectHairstyle = (index)=>{ setShowStylist(true); setCurrentSlide(index); clearInterval(intervalId); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen bg-gradient-to-b from-[#b0e0e6] to-[#00008b]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-8 mt-8", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Your name...", name: "userName", className: "p-2 text-lg font-roboto border-2 border-gray-300 rounded-md", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "relative w-full", onClick: ()=>setShowStylist(false), __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center overflow-x-hidden w-full py-4", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "whitespace-nowrap transition-transform ease-in-out duration-300", style: { transform: `translateX(-${currentSlide * 100}%)` }, __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, hairstyles.map((src, index)=>/*#__PURE__*/ React.createElement("img", { key: index, src: src, alt: `Hairstyle ${index + 1}`, className: "inline-block w-[150px] h-[150px] object-cover rounded-lg m-2 cursor-pointer", onClick: ()=>selectHairstyle(index), __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }))))), showStylist && /*#__PURE__*/ React.createElement("div", { className: "text-center text-white text-lg font-roboto mt-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, stylists[currentSlide]), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } body { animation: fadeIn 1s ease-in; } `)); }