function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(""); const [filteredRappers, setFilteredRappers] = React.useState([]); const rappers = [ { name: "Travis Scott", bio: "An influential figure in the rap genre known for his atmospheric sound and dynamic live performances.", img: "/images/travis-scott.jpg" }, { name: "Drake", bio: "A rapper, singer, and actor from Canada who has become one of the most prominent figures in music globally.", img: "/images/drake.jpg" }, { name: "Playboi Carti", bio: "Known for his experimental music style, mysterious persona, and influential fashion sense in the rap industry.", img: "/images/playboi-carti.jpg" } ]; React.useEffect(()=>{ setFilteredRappers(rappers.filter((rapper)=>rapper.name.toLowerCase().includes(searchTerm.toLowerCase()))); }, [ searchTerm ]); const handleChange = (event)=>{ setSearchTerm(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto bg-[#F5F5F5] min-h-screen", __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[1200px] mx-auto", __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-center text-4xl text-[#121212] mb-12", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }, "History of American Rap"), /*#__PURE__*/ React.createElement("div", { className: "flex justify-center mb-12", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search for a rapper...", className: "p-2 w-full max-w-[600px] border-2 border-gray-300 focus:outline-none focus:border-[#000]", name: "search", value: searchTerm, onChange: handleChange, __source: { fileName: "", lineNumber: 40, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, filteredRappers.map((rapper)=>/*#__PURE__*/ React.createElement("div", { key: rapper.name, className: "bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: rapper.img, alt: `Photo of ${rapper.name}`, className: "w-full h-[300px] object-cover mb-4 rounded-lg", __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl text-[#121212] mb-2", __source: { fileName: "", lineNumber: 46, columnNumber: 15 }, __self: this }, rapper.name), /*#__PURE__*/ React.createElement("p", { className: "text-[#666]", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, rapper.bio)))))); }