function SearchButton({ onClick, type = "submit", buttonText = /*#__PURE__*/ React.createElement("i", { className: "fas fa-search", __source: { fileName: "", lineNumber: 1, columnNumber: 64 }, __self: this }) }) { return /*#__PURE__*/ React.createElement("button", { type: type, className: "p-2 bg-[#1db954] text-white rounded-r-md", onClick: onClick, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, buttonText); } function SearchButtonStory() { const handleClick = ()=>{ // handle the click event }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 19, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(SearchButton, { onClick: handleClick, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(SearchButton, { buttonText: "Search", onClick: handleClick, __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this })); } function MainComponent() { const [recommendations, setRecommendations] = React.useState([ { title: "Song Title 1", artist: "Artist 1", img: "./album1.jpg" }, { title: "Song Title 2", artist: "Artist 2", img: "./album2.jpg" }, { title: "Song Title 3", artist: "Artist 3", img: "./album3.jpg" } ]); const [searchQuery, setSearchQuery] = React.useState(""); const [isLoading, setIsLoading] = React.useState(false); const handleSearchClick = (e)=>{ e.preventDefault(); setIsLoading(true); fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: "user", content: searchQuery } ] }) }).then((response)=>response.json()).then((data)=>{ const newRecommendation = { title: data.choices[0].message.content, artist: "Generated Artist", img: "./generated.jpg" }; setRecommendations([ ...recommendations, newRecommendation ]); setIsLoading(false); }); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f4f4f4] text-[#333]", __source: { fileName: "", lineNumber: 35, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#1db954] p-4", __source: { fileName: "", lineNumber: 36, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-white text-2xl font-roboto", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }, "Music Recommendation App")), /*#__PURE__*/ React.createElement("main", { className: "p-6", __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 41, columnNumber: 11 }, __self: this }, "Your Recommendations"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, recommendations.map((rec, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 bg-white shadow-lg rounded-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: rec.img, alt: `Album cover for ${rec.title}`, className: "w-full h-[200px] object-cover rounded-md", __source: { fileName: "", lineNumber: 45, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 46, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-roboto", __source: { fileName: "", lineNumber: 47, columnNumber: 19 }, __self: this }, rec.title), /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto text-[#666]", __source: { fileName: "", lineNumber: 48, columnNumber: 19 }, __self: this }, rec.artist)))))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto mb-2", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Search for Music"), /*#__PURE__*/ React.createElement("form", { className: "flex", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", placeholder: "Search for a song or artist", className: "flex-grow p-2 border border-gray-300 rounded-l-md", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(SearchButton, { onClick: handleSearchClick, __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this })), isLoading && /*#__PURE__*/ React.createElement("p", { className: "text-center font-roboto text-[#333]", __source: { fileName: "", lineNumber: 67, columnNumber: 25 }, __self: this }, "Loading..."))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#1db954] p-4 mt-6", __source: { fileName: "", lineNumber: 70, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-white text-center font-roboto", __source: { fileName: "", lineNumber: 71, columnNumber: 9 }, __self: this }, "© 2023 Music Recommendation App"))); }