function MainComponent() { const [view, setView] = React.useState('list'); const [objects, setObjects] = React.useState([]); const [newObject, setNewObject] = React.useState({ name: '', properties: '', example: '', actions: '', relatedObjects: [] }); const handleViewChange = (e)=>{ setView(e.target.value); }; const handleInputChange = (e)=>{ if (e.target.name === "relatedObjects") { setNewObject({ ...newObject, [e.target.name]: e.target.value.split(",") }); } else { setNewObject({ ...newObject, [e.target.name]: e.target.value }); } }; const handleSubmit = (e)=>{ e.preventDefault(); setObjects([ ...objects, newObject ]); setNewObject({ name: '', properties: '', example: '', actions: '', relatedObjects: [] }); }; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto", __source: { fileName: "", lineNumber: 25, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 26, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { value: "list", onClick: handleViewChange, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, "List View"), /*#__PURE__*/ React.createElement("button", { value: "diagram", onClick: handleViewChange, className: "bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, "Diagram View")), view === 'list' ? /*#__PURE__*/ React.createElement(ListView, { objects: objects, __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }) : /*#__PURE__*/ React.createElement(DiagramView, { objects: objects, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "mt-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", placeholder: "Object Name", value: newObject.name, onChange: handleInputChange, className: "mr-3 p-2 border rounded", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "properties", placeholder: "Properties", value: newObject.properties, onChange: handleInputChange, className: "mr-3 p-2 border rounded", __source: { fileName: "", lineNumber: 37, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "example", placeholder: "Example", value: newObject.example, onChange: handleInputChange, className: "mr-3 p-2 border rounded", __source: { fileName: "", lineNumber: 38, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "actions", placeholder: "Actions", value: newObject.actions, onChange: handleInputChange, className: "mr-3 p-2 border rounded", __source: { fileName: "", lineNumber: 39, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "relatedObjects", placeholder: "Related Objects (comma separated)", value: newObject.relatedObjects, onChange: handleInputChange, className: "mr-3 p-2 border rounded", __source: { fileName: "", lineNumber: 40, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, "Add Object"))); } function ListView({ objects }) { return /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, objects.map((object, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "p-2 border-b border-gray-200", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, object.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, object.properties), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, object.actions), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Related: ", object.relatedObjects.join(', '))))); } function DiagramView({ objects }) { return /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 64, columnNumber: 5 }, __self: this }, objects.map((object, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "absolute top-0 left-[${index * 100}px] bg-white p-3 border rounded shadow", __source: { fileName: "", lineNumber: 66, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-bold", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this }, object.name), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 68, columnNumber: 11 }, __self: this }, object.properties), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, object.actions), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Related: ", object.relatedObjects.join(', '))))); }