function MainComponent() { const [title, setTitle] = React.useState(''); const validateTitleInput = (event)=>{ const { value } = event.target; // Allow only letters, numbers, spaces, and common punctuation const regex = /^[a-zA-Z0-9.,'!&\- ]*$/; if (value === '' || regex.test(value)) { setTitle(value); } }; const titleInput = /*#__PURE__*/ React.createElement("input", { type: "text", name: "title", placeholder: "Song Title", value: title, onChange: validateTitleInput, className: "w-full p-4 mb-4 border-2 border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }); const artistInput = /*#__PURE__*/ React.createElement("input", { type: "text", name: "artist", placeholder: "Artist", className: "w-full p-4 mb-4 border-2 border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }); const lyricsTextarea = /*#__PURE__*/ React.createElement("textarea", { name: "lyrics", rows: "10", placeholder: "Write your lyrics here...", className: "w-full p-4 mb-6 border-2 border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }); const albumInput = /*#__PURE__*/ React.createElement("input", { type: "text", name: "album", placeholder: "Album", className: "w-full p-4 mb-4 border-2 border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }); const yearInput = /*#__PURE__*/ React.createElement("input", { type: "text", name: "year", placeholder: "Year", className: "w-full p-4 mb-4 border-2 border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }); const submitButton = /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-4 text-white bg-blue-600 hover:bg-blue-700 rounded-md font-roboto transition-colors", __source: { fileName: "", lineNumber: 54, columnNumber: 5 }, __self: this }, "Create Lyrics"); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center h-screen p-4 bg-gray-100 font-roboto", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-3xl bg-white p-8 rounded-md shadow-lg", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl mb-8 font-bold text-center text-gray-800 font-roboto", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, "Lyric Creator"), /*#__PURE__*/ React.createElement("form", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, titleInput, artistInput, albumInput, yearInput, lyricsTextarea, submitButton))); }