function TrendingFashionDisplay({ imgSrc, altText }) { return /*#__PURE__*/ React.createElement("img", { src: imgSrc, alt: altText, className: "w-full", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function TrendingFashionDisplayStory() { const item = { img: '/path/to/fashion-item.jpg', desc: 'Chic summer outfit' }; const selectedGender = 'women'; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(TrendingFashionDisplay, { imgSrc: item.img, altText: `Trending fashion for ${selectedGender}: ${item.desc}`, __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this })); } function MainComponent() { const [selectedGender, setSelectedGender] = React.useState(null); const genderImages = { men: "/path/to/men.jpg", women: "/path/to/women.jpg" }; const fashionItems = { men: [ { img: "/path/to/mens-fashion1.jpg", desc: "Mens formal suit" }, { img: "/path/to/mens-fashion2.jpg", desc: "Mens casual jeans and t-shirt" } ], women: [ { img: "/path/to/womens-fashion1.jpg", desc: "Womens elegant gown" }, { img: "/path/to/womens-fashion2.jpg", desc: "Womens summer dress" } ] }; const handleGenderSelect = (gender)=>{ setSelectedGender(gender); }; return /*#__PURE__*/ React.createElement("div", { className: "font-crimson-text min-h-screen bg-white text-black", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "p-4 flex justify-center", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl uppercase", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "LOOKBOOK")), /*#__PURE__*/ React.createElement("main", { className: "px-4 py-2", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "flex justify-center space-x-4 my-4", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "w-[256px]", onClick: ()=>handleGenderSelect('men'), __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: genderImages.men, alt: "Button for trending men's fashion", className: "w-full", __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-[256px]", onClick: ()=>handleGenderSelect('women'), __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: genderImages.women, alt: "Button for trending women's fashion", className: "w-full", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-3xl my-4", __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }, "Trending Fashion ", selectedGender ? `for ${selectedGender.charAt(0).toUpperCase() + selectedGender.slice(1)}` : ''), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this }, selectedGender && fashionItems[selectedGender].map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 rounded-lg shadow-lg", onClick: ()=>window.alert(`This would use Google Vision API to display the details of: ${item.desc}`), __source: { fileName: "", lineNumber: 42, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement(TrendingFashionDisplay, { imgSrc: item.img, altText: `Trending fashion for ${selectedGender}: ${item.desc}`, __source: { fileName: "", lineNumber: 43, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 17 }, __self: this }, item.desc), /*#__PURE__*/ React.createElement("button", { className: "bg-black text-white py-2 px-4 rounded mt-4", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }, "Shop Now"))))))); }