function MainComponent() { const graphData = [ { label: 'APR', views: 1 }, { label: '01', views: 1 }, { label: '02', views: 2 }, { label: '03', views: 3 }, { label: '04', views: 4 }, { label: '05', views: 5 }, { label: '06', views: 5 }, { label: '07', views: 5 }, { label: '08', views: 4 }, { label: '09', views: 3 }, { label: '10', views: 2 }, { label: '11', views: 1 }, { label: '12', views: 1 }, { label: '13', views: 1 } ]; const maxViews = 5; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 p-8", __source: { fileName: "", lineNumber: 22, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-6", __source: { fileName: "", lineNumber: 23, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-gray-800", __source: { fileName: "", lineNumber: 24, columnNumber: 9 }, __self: this }, "Post Views"), /*#__PURE__*/ React.createElement("button", { className: "bg-blue-500 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Create Post")), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-white shadow rounded-lg p-6 relative", __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-700 mb-3", __source: { fileName: "", lineNumber: 30, columnNumber: 9 }, __self: this }, "g"), /*#__PURE__*/ React.createElement("svg", { viewBox: "0 0 100 50", className: "w-full h-48", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, graphData.map((data, index, arr)=>{ const nextData = arr[index + 1]; if (!nextData) return null; const x1 = index / (arr.length - 1) * 100; const x2 = (index + 1) / (arr.length - 1) * 100; const y1 = 50 - data.views / maxViews * 50; const y2 = 50 - nextData.views / maxViews * 50; return /*#__PURE__*/ React.createElement("line", { key: index, x1: `${x1}%`, x2: `${x2}%`, y1: `${y1}%`, y2: `${y2}%`, stroke: "#4F46E5", strokeWidth: "2", __source: { fileName: "", lineNumber: 40, columnNumber: 15 }, __self: this }); })), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, graphData.map((data, index)=>/*#__PURE__*/ React.createElement("span", { key: index, className: "text-xs font-medium text-gray-700", __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, data.label))))); }