function MainComponent() { const [abbreviation, setAbbreviation] = React.useState(''); const [meaning, setMeaning] = React.useState(''); const [abbreviationsList, setAbbreviationsList] = React.useState([]); const addAbbreviation = (event)=>{ event.preventDefault(); setAbbreviationsList((prevList)=>[ ...prevList, { abbreviation, meaning } ]); setAbbreviation(''); setMeaning(''); }; const abbreviationListContent = abbreviationsList.map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "bg-white shadow-lg rounded-lg p-4 mb-4 flex justify-between items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text text-[#121212]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, item.abbreviation), /*#__PURE__*/ React.createElement("span", { className: "font-crimson-text text-[#555]", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, item.meaning))); return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#f7f7f7] py-10", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto px-5", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-semibold text-center mb-6 font-crimson-text text-[#121212]", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, "Ord Forkortelser"), /*#__PURE__*/ React.createElement("form", { onSubmit: addAbbreviation, className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 25, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "abbreviation", value: abbreviation, onChange: (e)=>setAbbreviation(e.target.value), placeholder: "Fork.", className: "flex-1 p-2 border-[#ced4da] border-2 rounded-lg", required: true, __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "meaning", value: meaning, onChange: (e)=>setMeaning(e.target.value), placeholder: "For", className: "flex-1 p-2 border-[#ced4da] border-2 rounded-lg", required: true, __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "p-2 bg-[#007bff] text-white rounded-lg font-semibold hover:bg-[#0056b3] transition duration-300", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Legg til")), /*#__PURE__*/ React.createElement("ul", { className: "mt-6", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, abbreviationListContent))); }