function MainComponent() { const [keyword, setKeyword] = React.useState(''); const [generatedDomains, setGeneratedDomains] = React.useState([]); const generateDomains = ()=>{ if (keyword) { const newDomains = [ `${keyword}.com`, `${keyword}.net`, `${keyword}.org` ]; setGeneratedDomains(newDomains); } }; const handleChange = (event)=>{ setKeyword(event.target.value); }; const domainList = generatedDomains.length > 0 && /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 p-4", __source: { fileName: "", lineNumber: 14, columnNumber: 5 }, __self: this }, generatedDomains.map((domain, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "bg-[#f8f9fa] p-3 rounded shadow flex items-center justify-between", __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#212529]", __source: { fileName: "", lineNumber: 20, columnNumber: 11 }, __self: this }, domain), /*#__PURE__*/ React.createElement("button", { className: "ml-4 bg-[#007bff] text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline font-roboto", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Select")))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto min-h-screen bg-[#e9ecef] flex flex-col items-center py-10", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl text-[#343a40] mb-6", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, "Domain aGenerator"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-2xl bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4", __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block text-[#343a40] text-lg mb-2", htmlFor: "keyword", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Enter Keyword"), /*#__PURE__*/ React.createElement("input", { className: "shadow appearance-none border rounded w-full py-2 px-3 text-[#495057] leading-tight focus:outline-none focus:shadow-outline", id: "keyword", name: "keyword", type: "text", placeholder: "example", value: keyword, onChange: handleChange, autoComplete: "off", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 47, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "bg-[#28a745] hover:bg-[#218838] text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", type: "button", onClick: generateDomains, __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Generate"))), domainList); }