function MainComponent() { const [websites, setWebsites] = React.useState([]); const [inputValue, setInputValue] = React.useState(''); const handleAddWebsite = ()=>{ if (inputValue.trim() !== '' && !websites.includes(inputValue.trim())) { setWebsites([ ...websites, inputValue.trim() ]); setInputValue(''); } }; const handleInputChange = (event)=>{ setInputValue(event.target.value); }; const websiteList = websites.map((website, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#f8f9fa] p-2 rounded shadow-sm mb-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, website), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setWebsites(websites.filter((w)=>w !== website)), className: "text-red-500", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "Remove website", __source: { fileName: "", lineNumber: 17, columnNumber: 9 }, __self: this }, "🚫")))); return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-xl text-[#121212] my-4", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "🚫 Adult Content Blocker"), /*#__PURE__*/ React.createElement("input", { className: "font-roboto border p-2 rounded text-lg w-[300px] sm:w-[400px] mx-auto mb-4", type: "text", placeholder: "Enter website URL...", name: "website", value: inputValue, onChange: handleInputChange, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "font-roboto bg-red-500 text-white p-2 rounded w-[300px] sm:w-[400px] mx-auto mb-4", onClick: handleAddWebsite, __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, "Block Website"), /*#__PURE__*/ React.createElement("div", { className: "w-[300px] sm:w-[400px]", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, websiteList))); }