function MainComponent({ data }) { return /*#__PURE__*/ React.createElement("div", { className: "p-4 max-w-sm rounded overflow-hidden shadow-lg bg-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "font-bold text-xl mb-2", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, data.symbol), /*#__PURE__*/ React.createElement("p", { className: "text-gray-700 text-base", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, "Recommendation: ", /*#__PURE__*/ React.createElement("span", { className: `font-bold text-${data.recommendation === 'buy' ? 'green-500' : data.recommendation === 'sell' ? 'red-500' : 'gray-500'}`, __source: { fileName: "", lineNumber: 6, columnNumber: 25 }, __self: this }, data.recommendation.toUpperCase())), /*#__PURE__*/ React.createElement("div", { className: "pt-4", __source: { fileName: "", lineNumber: 8, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Price:"), " ", /*#__PURE__*/ React.createElement("span", { className: "ml-auto", __source: { fileName: "", lineNumber: 10, columnNumber: 57 }, __self: this }, data.price)), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 12, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, "Change:"), " ", /*#__PURE__*/ React.createElement("span", { className: `ml-auto text-${data.change >= 0 ? 'green-500' : 'red-500'}`, __source: { fileName: "", lineNumber: 13, columnNumber: 58 }, __self: this }, data.change, "%")), /*#__PURE__*/ React.createElement("div", { className: "flex", __source: { fileName: "", lineNumber: 15, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-semibold", __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, "Volume:"), " ", /*#__PURE__*/ React.createElement("span", { className: "ml-auto", __source: { fileName: "", lineNumber: 16, columnNumber: 58 }, __self: this }, data.volume)))); } function StoryComponent() { const dataProps = [ { symbol: 'BTCUSD', recommendation: 'buy', price: '10500', change: 2.5, volume: 'High' }, { symbol: 'ETHUSD', recommendation: 'sell', price: '350', change: -1.2, volume: 'Medium' }, { symbol: 'LTCUSD', recommendation: 'hold', price: '45', change: 0, volume: 'Low' } ]; return /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 31, columnNumber: 5 }, __self: this }, dataProps.map((data, index)=>/*#__PURE__*/ React.createElement(MainComponent, { key: index, data: data, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }))); }