function MainComponent({ diagramTitle, figures, connections, lines }) { const renderFigures = (figures)=>figures.map((figure, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `absolute ${figure.position} flex flex-col items-center`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `border-2 p-2 ${figure.shape}`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, figure.text)), /*#__PURE__*/ React.createElement("span", { className: "mt-1 text-xs", __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }, figure.label))); const renderConnections = (connections)=>connections.map((connection, index)=>/*#__PURE__*/ React.createElement("svg", { key: index, className: `absolute ${connection.position}`, style: { width: connection.width, height: connection.height }, __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("path", { d: connection.path, stroke: "#121212", strokeWidth: "2", fill: "none", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }))); const renderLines = (lines)=>lines.map((line, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `absolute ${line.position}`, __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `border-t-2 border-[#121212] ${line.dimension}`, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }))); return /*#__PURE__*/ React.createElement("div", { className: "relative font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 24, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "relative border-2 p-4", __source: { fileName: "", lineNumber: 25, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "absolute top-0 left-0 right-0 text-center", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, diagramTitle), renderFigures(figures), renderLines(lines), renderConnections(connections))); } function StoryComponent() { const diagramTitle = 'U.S. Patent Dec. 24, 2019 Sheet 3 of 5 US 10,516,426 B1'; const figures = [ { position: 'top-[40px] left-[20px]', text: 'Active Splitter', label: '302', shape: 'rounded' }, { position: 'top-[160px] left-[300px]', text: 'Reconfigurable IF Filter Circuit', label: '310', shape: 'rounded' }, { position: 'top-[160px] left-[800px]', text: 'Active Combiner', label: '312', shape: 'rounded' }, { position: 'top-[480px] left-[1000px]', text: 'Low-Pass Filter', label: '316', shape: 'rounded' } ]; const connections = [ { position: 'top-[140px] left-[192px]', width: '110px', height: '10px', path: 'M 5 5 L 105 5' }, { position: 'top-[140px] left-[692px]', width: '110px', height: '10px', path: 'M 5 5 L 105 5' }, { position: 'top-[440px] left-[892px]', width: '110px', height: '10px', path: 'M 5 5 L 105 5' } ]; const lines = [ { position: 'top-[120px] left-[145px]', dimension: 'w-10' }, { position: 'top-[120px] left-[425px]', dimension: 'w-[345px]' }, { position: 'top-[120px] left-[925px]', dimension: 'w-[60px]' }, { position: 'top-[120px] left-[1045px]', dimension: 'w-10' } ]; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { diagramTitle: diagramTitle, figures: figures, connections: connections, lines: lines, __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this })); }