function MainComponent() { const [playing, setPlaying] = React.useState(false); const [beatData, setBeatData] = React.useState(Array.from({ length: 16 }).fill(false)); function toggleBeat(index) { const newBeatData = [ ...beatData ]; newBeatData[index] = !newBeatData[index]; setBeatData(newBeatData); } const beatGrid = Array.from({ length: 16 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `border border-gray-400 w-[40px] h-[40px] flex items-center justify-center cursor-pointer ${beatData[index] ? 'bg-green-600' : ''}`, onClick: ()=>toggleBeat(index), __source: { fileName: "", lineNumber: 12, columnNumber: 5 }, __self: this }, index + 1)); function togglePlayPause() { setPlaying(!playing); } return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col bg-gray-900 text-white font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full bg-gray-800 p-2 flex justify-between items-center", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-gray-700", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-file-alt", __source: { fileName: "", lineNumber: 30, columnNumber: 47 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-gray-700", __source: { fileName: "", lineNumber: 31, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-edit", __source: { fileName: "", lineNumber: 31, columnNumber: 47 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-gray-700", __source: { fileName: "", lineNumber: 32, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-project-diagram", __source: { fileName: "", lineNumber: 32, columnNumber: 47 }, __self: this }))), /*#__PURE__*/ React.createElement("h1", { className: "text-lg", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Pattern 1"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-gray-700", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-play-circle", __source: { fileName: "", lineNumber: 36, columnNumber: 47 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "p-2 bg-gray-700", __source: { fileName: "", lineNumber: 37, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-stop-circle", __source: { fileName: "", lineNumber: 37, columnNumber: 47 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "flex flex-1 overflow-hidden", __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-[300px] bg-gray-800 p-2 space-y-2 overflow-y-auto", __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, "Browser"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, "Installed"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 mt-2", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Effects"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-500 ml-2", __source: { fileName: "", lineNumber: 48, columnNumber: 11 }, __self: this }, "Fruity"), /*#__PURE__*/ React.createElement("div", { className: "text-gray-400 ml-4", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this }, "VST"), /*#__PURE__*/ React.createElement("ul", { className: "ml-6", __source: { fileName: "", lineNumber: 51, columnNumber: 11 }, __self: this }, [ 'Auto-Key', 'Auto-Tune Access', 'FabFilter Micro (Mono)', 'FabFilter One', 'FabFilter Pro-C', 'FabFilter Pro-Q' ].map((item, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 53, columnNumber: 15 }, __self: this }, item)))), /*#__PURE__*/ React.createElement("div", { className: "flex-1 grid grid-cols-16 gap-1 p-2", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, Array.from({ length: 16 }).map((_, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `border border-gray-600 h-12 bg-gray-700 ${index % 2 === 0 ? 'bg-gray-600' : 'bg-gray-700'}`, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, index + 1)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 71, columnNumber: 7 }, __self: this }, ` @font-face { font-family: 'roboto'; src: url('/fonts/roboto.woff2') format('woff2'); } `)); }