function MainComponent({ title, tracks }) { return /*#__PURE__*/ React.createElement("div", { className: "p-6 bg-[#1e272e] text-white", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-tango mb-6", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("ul", { __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, tracks.map((track, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-8", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 8, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-2xl font-tango", __source: { fileName: "", lineNumber: 9, columnNumber: 15 }, __self: this }, track.title), /*#__PURE__*/ React.createElement("audio", { controls: true, className: "w-full", __source: { fileName: "", lineNumber: 10, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("source", { src: track.url, type: "audio/mpeg", __source: { fileName: "", lineNumber: 11, columnNumber: 17 }, __self: this }), "Your browser does not support the audio element.")))))); } function StoryComponent() { const tracks = [ { title: "La Cumparsita", url: "/audio/la-cumparsita.mp3" }, { title: "El Choclo", url: "/audio/el-choclo.mp3" }, { title: "Por Una Cabeza", url: "/audio/por-una-cabeza.mp3" } ]; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-[#222f3e]", __source: { fileName: "", lineNumber: 30, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { title: "Tango Music Collection", tracks: tracks, __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this })); }