function MainComponent() { const [profileType, setProfileType] = React.useState('listener'); const [interests, setInterests] = React.useState(''); const [likedGenres, setLikedGenres] = React.useState(''); const [followedProfiles, setFollowedProfiles] = React.useState([]); const handleProfileTypeChange = (event)=>{ setProfileType(event.target.value); setInterests(''); setLikedGenres(''); setFollowedProfiles([]); }; const handleInterestsChange = (event)=>{ setInterests(event.target.value); }; const handleLikedGenresChange = (event)=>{ setLikedGenres(event.target.value); }; const handleFollow = (profileName)=>{ setFollowedProfiles((prevProfiles)=>{ if (!prevProfiles.includes(profileName)) { return [ ...prevProfiles, profileName ]; } return prevProfiles; }); }; const handleSubmit = (event)=>{ event.preventDefault(); }; const followButton = (profileName)=>/*#__PURE__*/ React.createElement("button", { onClick: ()=>handleFollow(profileName), className: "text-[#00b4d8] border border-[#00b4d8] py-1 px-3 rounded hover:bg-[#00b4d8] hover:text-white transition-colors", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Follow"); const tastesSection = (followed)=>/*#__PURE__*/ React.createElement("div", { className: "p-4 mt-4 bg-white rounded shadow", __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "font-roboto text-lg text-[#121212] mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Your Tastes"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-5", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, followed.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto text-sm text-[#666666]", __source: { fileName: "", lineNumber: 49, columnNumber: 21 }, __self: this }, item)))); const profileElements = followedProfiles.map((profile, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-200 rounded-lg flex flex-col items-center justify-center", __source: { fileName: "", lineNumber: 56, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: `./images/${profile.toLowerCase().replace(/\s/g, '-')}-profile.jpg`, alt: `${profile} profile picture`, className: "w-[150px] h-[150px] rounded-full mb-2", __source: { fileName: "", lineNumber: 57, columnNumber: 13 }, __self: this }), profileType === 'artist' && /*#__PURE__*/ React.createElement("a", { href: `/music/${profile.toLowerCase().replace(/\s/g, '-')}`, className: "text-[#00b4d8] hover:underline", __source: { fileName: "", lineNumber: 62, columnNumber: 17 }, __self: this }, "Listen to songs"), /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg text-[#121212]", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, profile), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-sm text-[#666666]", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, interests), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-center space-x-2 mt-2", __source: { fileName: "", lineNumber: 68, columnNumber: 13 }, __self: this }, likedGenres.split(',').slice(0, 3).map((genre, i)=>/*#__PURE__*/ React.createElement("span", { key: i, className: "font-roboto text-sm bg-[#e0e0e0] px-2 py-1 rounded-full", __source: { fileName: "", lineNumber: 70, columnNumber: 21 }, __self: this }, genre.trim()))), followButton(profile))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen flex flex-col items-center justify-center bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#121212] mb-4", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Music Profile Matcher"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mb-6 w-full max-w-lg flex flex-col", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center border border-gray-300 p-2 mb-4 rounded", __source: { fileName: "", lineNumber: 81, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "fa fa-user mr-3", __source: { fileName: "", lineNumber: 82, columnNumber: 21 }, __self: this }), /*#__PURE__*/ React.createElement("select", { name: "profileType", value: profileType, onChange: handleProfileTypeChange, className: "flex-1 appearance-none bg-transparent", __source: { fileName: "", lineNumber: 83, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "listener", __source: { fileName: "", lineNumber: 84, columnNumber: 25 }, __self: this }, "Listener"), /*#__PURE__*/ React.createElement("option", { value: "artist", __source: { fileName: "", lineNumber: 85, columnNumber: 25 }, __self: this }, "Artist"))), /*#__PURE__*/ React.createElement("input", { type: "text", name: "interests", value: interests, onChange: handleInterestsChange, className: "border border-gray-300 p-2 mb-4 rounded", placeholder: "Enter your interests", __source: { fileName: "", lineNumber: 88, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "likedGenres", value: likedGenres, onChange: handleLikedGenresChange, className: "border border-gray-300 p-2 mb-4 rounded", placeholder: "Enter your favorite genres (up to 3)", __source: { fileName: "", lineNumber: 96, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-[#00b4d8] text-white p-2 rounded", __source: { fileName: "", lineNumber: 104, columnNumber: 17 }, __self: this }, "Find For You Feed")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4", __source: { fileName: "", lineNumber: 108, columnNumber: 13 }, __self: this }, profileElements), profileType === 'listener' && followedProfiles.length > 0 && tastesSection(followedProfiles)); }