function MainComponent({ onSearch, images, loading }) { const [searchTerm, setSearchTerm] = React.useState(''); const handleSearchChange = (event)=>{ setSearchTerm(event.target.value); }; const handleSearchSubmit = (event)=>{ event.preventDefault(); onSearch(searchTerm); }; const loader = /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 13, columnNumber: 18 }, __self: this }, "Loading..."); const imagesDisplay = images.map((image, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "transition duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-110", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { className: "w-full h-[300px] object-cover rounded-lg", src: image.url, alt: `Search result ${index + 1}`, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f0e7db]", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "pt-8 px-4", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { onSubmit: handleSearchSubmit, className: "flex justify-center", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { className: "w-full max-w-xl p-4 text-lg font-roboto text-[#333333] bg-white border border-gray-300 rounded-l-lg shadow focus:ring-2 focus:ring-[#7986cb]", type: "text", placeholder: "Search for images...", name: "searchTerm", value: searchTerm, onChange: handleSearchChange, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#5c6bc0] text-white p-4 rounded-r-lg font-semibold shadow hover:bg-[#3949ab] focus:ring-2 focus:ring-[#5c6bc0]", type: "submit", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "🔍"))), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 44, columnNumber: 7 }, __self: this }, loading ? loader : imagesDisplay)); } function StoryComponent() { const [images, setImages] = React.useState([]); const [loading, setLoading] = React.useState(false); const onSearch = async (term)=>{ setLoading(true); try { const response = await fetch(`/integrations/image-search/imagesearch?q=${encodeURIComponent(term)}`, { method: 'GET' }); const data = await response.json(); setImages(data.items || []); } catch (error) { console.error('Search failed:', error); } setLoading(false); }; React.useEffect(()=>{ onSearch('initial search'); }, []); const loadingState = /*#__PURE__*/ React.createElement(MainComponent, { onSearch: onSearch, images: images, loading: true, __source: { fileName: "", lineNumber: 74, columnNumber: 5 }, __self: this }); const loadedImagesState = /*#__PURE__*/ React.createElement(MainComponent, { onSearch: onSearch, images: [ { url: '/images/sample1.jpg' }, { url: '/images/sample2.jpg' }, { url: '/images/sample3.jpg' } ], loading: false, __source: { fileName: "", lineNumber: 82, columnNumber: 5 }, __self: this }); const noImagesState = /*#__PURE__*/ React.createElement(MainComponent, { onSearch: onSearch, images: [], loading: false, __source: { fileName: "", lineNumber: 94, columnNumber: 5 }, __self: this }); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 102, columnNumber: 5 }, __self: this }, loadingState, loadedImagesState, noImagesState); }