function MainComponent() { const [person, setPerson] = React.useState(null); const [searchQuery, setSearchQuery] = React.useState(""); const handleSearch = ()=>{ // Dummy data for demonstration purposes const data = { name: "John Doe", phoneNumber: "123-456-7890", homeAddress: "1234 Main St, Anytown, USA", frequentedPlaces: [ "Gym", "Cafe", "Park" ], friendsAndFamily: [ "Jane Doe", "Sam Smith", "Alice Johnson" ], houseColor: "Blue" }; setPerson(data); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8 font-roboto", __source: { fileName: "", lineNumber: 20, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold text-center mb-8", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, "God's Eye Search"), /*#__PURE__*/ React.createElement("div", { className: "max-w-md mx-auto bg-white p-8 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "searchQuery", value: searchQuery, onChange: (e)=>setSearchQuery(e.target.value), placeholder: "Enter a person's name", className: "w-full p-2 mb-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSearch, className: "w-full p-2 bg-blue-500 text-white font-bold rounded hover:bg-blue-600", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Search"), person && /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-bold mb-4", __source: { fileName: "", lineNumber: 39, columnNumber: 13 }, __self: this }, "Search Results"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 40, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 40, columnNumber: 16 }, __self: this }, "Name:"), " ", person.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 41, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 41, columnNumber: 16 }, __self: this }, "Phone Number:"), " ", person.phoneNumber), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 42, columnNumber: 16 }, __self: this }, "Home Address:"), " ", person.homeAddress), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 43, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 43, columnNumber: 16 }, __self: this }, "Frequented Places:"), " ", person.frequentedPlaces.join(", ")), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 44, columnNumber: 16 }, __self: this }, "Friends and Family:"), " ", person.friendsAndFamily.join(", ")), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 45, columnNumber: 16 }, __self: this }, "House Color:"), " ", person.houseColor)))); }