function MainComponent() { const [countryOfResidence, setCountryOfResidence] = React.useState(''); const [destinationCountry, setDestinationCountry] = React.useState(''); const [checklist, setChecklist] = React.useState(null); const countries = [ 'Country 1', 'Country 2', 'Country 3' ]; const handleCountryOfResidenceChange = (event)=>{ setCountryOfResidence(event.target.value); if (event.target.value && destinationCountry) { fetchChecklist(event.target.value, destinationCountry); } }; const handleDestinationCountryChange = (event)=>{ setDestinationCountry(event.target.value); if (countryOfResidence && event.target.value) { fetchChecklist(countryOfResidence, event.target.value); } }; const fetchChecklist = (residence, destination)=>{ setChecklist([ 'Item 1', 'Item 2', 'Item 3' ]); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] flex flex-col", __source: { fileName: "", lineNumber: 27, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-white py-4 px-6 flex items-center justify-between", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./logo.png", alt: "Company Logo", className: "w-[120px] h-auto", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("main", { className: "flex-grow px-6 py-4", __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[500px] mx-auto space-y-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "countryOfResidence", className: "block text-sm font-semibold text-[#333] mb-2", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, "Country of Residence:"), /*#__PURE__*/ React.createElement("select", { id: "countryOfResidence", name: "countryOfResidence", className: "border border-gray-300 rounded px-4 py-2 w-full", value: countryOfResidence, onChange: handleCountryOfResidenceChange, __source: { fileName: "", lineNumber: 36, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 37, columnNumber: 15 }, __self: this }, "Select Country"), countries.map((country, idx)=>/*#__PURE__*/ React.createElement("option", { key: idx, value: country, __source: { fileName: "", lineNumber: 39, columnNumber: 17 }, __self: this }, country)))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "destinationCountry", className: "block text-sm font-semibold text-[#333] mb-2", __source: { fileName: "", lineNumber: 45, columnNumber: 13 }, __self: this }, "Destination Country:"), /*#__PURE__*/ React.createElement("select", { id: "destinationCountry", name: "destinationCountry", className: "border border-gray-300 rounded px-4 py-2 w-full", value: destinationCountry, onChange: handleDestinationCountryChange, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "", __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }, "Select Country"), countries.map((country, idx)=>/*#__PURE__*/ React.createElement("option", { key: idx + countries.length, value: country, __source: { fileName: "", lineNumber: 49, columnNumber: 17 }, __self: this }, country)))), checklist && countryOfResidence && destinationCountry && /*#__PURE__*/ React.createElement("div", { className: "border border-gray-300 bg-white p-4 rounded-lg", __source: { fileName: "", lineNumber: 55, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-semibold mb-3", __source: { fileName: "", lineNumber: 56, columnNumber: 15 }, __self: this }, "Travel Checklist"), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, checklist.map((item, idx)=>/*#__PURE__*/ React.createElement("li", { key: idx, __source: { fileName: "", lineNumber: 59, columnNumber: 19 }, __self: this }, item)))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-white border-t border-gray-200 p-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-comments text-lg", style: { animation: 'iconPulse 1.5s infinite' }, __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 73, columnNumber: 7 }, __self: this }, ` @keyframes iconPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } `)); }