function MainComponent({ data }) { return /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto shadow-2xl sm:rounded-lg border-4 border-gray-300 m-5", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "w-full text-sm text-left text-gray-600 dark:text-gray-400", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { className: "text-xs text-gray-700 uppercase bg-gradient-to-r from-purple-500 to-pink-500 dark:bg-gradient-to-r dark:from-gray-700 dark:to-gray-800", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6 text-white font-bold", __source: { fileName: "", lineNumber: 7, columnNumber: 13 }, __self: this }, "ID"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6 text-white font-bold", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, "Temperature"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6 text-white font-bold", __source: { fileName: "", lineNumber: 9, columnNumber: 13 }, __self: this }, "Humidity"), /*#__PURE__*/ React.createElement("th", { scope: "col", className: "py-3 px-6 text-white font-bold", __source: { fileName: "", lineNumber: 10, columnNumber: 13 }, __self: this }, "Air Quality"))), /*#__PURE__*/ React.createElement("tbody", { className: "bg-white dark:bg-gray-800", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, data.map((row, index)=>/*#__PURE__*/ React.createElement("tr", { key: index, className: "border-b dark:border-gray-700", __source: { fileName: "", lineNumber: 15, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 16, columnNumber: 15 }, __self: this }, row.id), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 17, columnNumber: 15 }, __self: this }, row.temperature), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 18, columnNumber: 15 }, __self: this }, row.humidity), /*#__PURE__*/ React.createElement("td", { className: "py-4 px-6", __source: { fileName: "", lineNumber: 19, columnNumber: 15 }, __self: this }, row.airQuality)))))); } function StoryComponent() { const mockData = [ { id: 1, temperature: '20°C', humidity: '30%', airQuality: 'Good' }, { id: 2, temperature: '22°C', humidity: '50%', airQuality: 'Moderate' }, { id: 3, temperature: '18°C', humidity: '45%', airQuality: 'Unhealthy' } ]; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 36, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { data: mockData, __source: { fileName: "", lineNumber: 37, columnNumber: 7 }, __self: this })); }

ID	Temperature	Humidity	Air Quality
1	20°C	30%	Good
2	22°C	50%	Moderate
3	18°C	45%	Unhealthy

ID	Temperature	Humidity	Air Quality
1	20°C	30%	Good
2	22°C	50%	Moderate
3	18°C	45%	Unhealthy