function MainComponent() { const [book, setBook] = React.useState('bible'); const handleChange = (e)=>setBook(e.target.value); return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen py-2 bg-gray-200", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 8, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "book-select", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 9, columnNumber: 21 }, __self: this }, "Select a book:"), /*#__PURE__*/ React.createElement("select", { id: "book-select", name: "book", value: book, onChange: handleChange, className: "mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md", __source: { fileName: "", lineNumber: 10, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "bible", __source: { fileName: "", lineNumber: 17, columnNumber: 25 }, __self: this }, "Bible"), /*#__PURE__*/ React.createElement("option", { value: "quaran", __source: { fileName: "", lineNumber: 18, columnNumber: 25 }, __self: this }, "Quran"))), /*#__PURE__*/ React.createElement("div", { className: "bg-white shadow overflow-hidden sm:rounded-lg w-full sm:w-96", __source: { fileName: "", lineNumber: 21, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "px-4 py-5 sm:px-6", __source: { fileName: "", lineNumber: 22, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg leading-6 font-medium text-gray-900", __source: { fileName: "", lineNumber: 23, columnNumber: 25 }, __self: this }, book === 'bible' ? 'The Holy Bible' : 'The Holy Quran')), /*#__PURE__*/ React.createElement("div", { className: "border-t border-gray-200", __source: { fileName: "", lineNumber: 25, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("dl", { __source: { fileName: "", lineNumber: 26, columnNumber: 25 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", __source: { fileName: "", lineNumber: 27, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-sm font-medium text-gray-500", __source: { fileName: "", lineNumber: 28, columnNumber: 33 }, __self: this }, book === 'bible' ? 'Testaments' : 'Chapters'), /*#__PURE__*/ React.createElement("dd", { className: "mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2", __source: { fileName: "", lineNumber: 29, columnNumber: 33 }, __self: this }, book === 'bible' ? 'Old Testament & New Testament' : '114 Surahs')), /*#__PURE__*/ React.createElement("div", { className: "bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", __source: { fileName: "", lineNumber: 33, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-sm font-medium text-gray-500", __source: { fileName: "", lineNumber: 34, columnNumber: 33 }, __self: this }, book === 'bible' ? 'Verses' : 'Verses'), /*#__PURE__*/ React.createElement("dd", { className: "mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2", __source: { fileName: "", lineNumber: 35, columnNumber: 33 }, __self: this }, book === 'bible' ? '31,102' : '6,236')), /*#__PURE__*/ React.createElement("div", { className: "bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6", __source: { fileName: "", lineNumber: 39, columnNumber: 29 }, __self: this }, /*#__PURE__*/ React.createElement("dt", { className: "text-sm font-medium text-gray-500", __source: { fileName: "", lineNumber: 40, columnNumber: 33 }, __self: this }, book === 'bible' ? 'Languages' : 'Languages'), /*#__PURE__*/ React.createElement("dd", { className: "mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2", __source: { fileName: "", lineNumber: 41, columnNumber: 33 }, __self: this }, book === 'bible' ? 'Over 3,000' : 'Translated into many languages')))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 49, columnNumber: 13 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 1s ease-in-out; } `)); }