function DynastyNameInput({ id, name, placeholder }) { return /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 rounded", type: "text", id: id, name: name, placeholder: placeholder, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function DynastyNameInputStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(DynastyNameInput, { id: "dynasty-name-1", name: "dynasty-name", placeholder: "Enter your dynasty name", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(DynastyNameInput, { id: "dynasty-name-2", name: "dynasty-name", placeholder: "Enter another dynasty name", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [dynasties, setDynasties] = React.useState([]); const [dynastyName, setDynastyName] = React.useState(''); const [rulerName, setRulerName] = React.useState(''); const handleCreateDynasty = ()=>{ if (dynastyName && rulerName) { setDynasties([ ...dynasties, { dynastyName, rulerName } ]); setDynastyName(''); setRulerName(''); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 flex flex-col items-center font-roboto", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mt-10", __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }, "Create Your Dynasty"), /*#__PURE__*/ React.createElement("p", { className: "mt-4 text-lg text-gray-700", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, "Rule over your dynasty and expand your empire!"), /*#__PURE__*/ React.createElement("div", { className: "mt-10 w-full max-w-[400px]", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-6", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-2 text-lg", htmlFor: "dynasty-name", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, "Dynasty Name:"), /*#__PURE__*/ React.createElement(DynastyNameInput, { id: "dynasty-name", name: "dynasty-name", placeholder: "Enter your dynasty name", value: dynastyName, onChange: (e)=>setDynastyName(e.target.value), __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col mb-6", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "mb-2 text-lg", htmlFor: "ruler-name", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, "Ruler Name:"), /*#__PURE__*/ React.createElement("input", { className: "p-2 border border-gray-300 rounded", type: "text", id: "ruler-name", name: "ruler-name", placeholder: "Enter the ruler's name", value: rulerName, onChange: (e)=>setRulerName(e.target.value), __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-700", onClick: handleCreateDynasty, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, "Create Dynasty")), /*#__PURE__*/ React.createElement("div", { className: "mt-10 w-full max-w-[800px]", __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, "My Dynasties"), /*#__PURE__*/ React.createElement("div", { className: "grid gap-6 md:grid-cols-2", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, dynasties.map((dynasty, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4 border border-gray-300 rounded bg-white", __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 57, columnNumber: 15 }, __self: this }, dynasty.dynastyName), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 58, columnNumber: 15 }, __self: this }, "Ruler: ", dynasty.rulerName)))))); }