function MainComponent() { const [dragging, setDragging] = React.useState(false); const handleDragStart = (e)=>{ e.dataTransfer.setData("text/plain", e.target.id); setDragging(true); }; const handleDragOver = (e)=>{ e.preventDefault(); }; const handleDrop = (e)=>{ e.preventDefault(); const moduleId = e.dataTransfer.getData("text/plain"); const module = document.getElementById(moduleId); e.target.appendChild(module); setDragging(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#ffffff] font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#f7f7f7] py-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto flex items-center justify-between px-4", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", id: "logo-upload", className: "hidden", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: "logo-upload", className: "cursor-pointer", __source: { fileName: "", lineNumber: 23, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: "./upload-logo.svg", alt: "Upload logo", className: "h-[60px]", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "color", className: "w-10 h-10 p-0 border-none cursor-pointer", defaultValue: "#121212", __source: { fileName: "", lineNumber: 26, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("nav", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("ul", { className: "flex space-x-6", __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 30, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#121212] hover:text-[#0066ff] transition-colors", __source: { fileName: "", lineNumber: 31, columnNumber: 17 }, __self: this }, "Templates")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 33, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#121212] hover:text-[#0066ff] transition-colors", __source: { fileName: "", lineNumber: 34, columnNumber: 17 }, __self: this }, "Integrations")), /*#__PURE__*/ React.createElement("li", { __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "#", className: "text-[#121212] hover:text-[#0066ff] transition-colors", __source: { fileName: "", lineNumber: 37, columnNumber: 17 }, __self: this }, "Marketplace")))))), /*#__PURE__*/ React.createElement("main", { className: "container mx-auto py-8 px-4", __source: { fileName: "", lineNumber: 43, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 ${dragging ? 'opacity-50' : ''}`, __source: { fileName: "", lineNumber: 44, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "bg-[#f7f7f7] p-6 shadow-md rounded-lg md:col-span-1 lg:col-span-1", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#121212] font-bold mb-4", __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Modules"), /*#__PURE__*/ React.createElement("ul", { className: "space-y-3", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("li", { id: "emailMarketing", draggable: "true", onDragStart: handleDragStart, className: "bg-gray-100 p-2 rounded-md cursor-grab hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 48, columnNumber: 15 }, __self: this }, "Email Marketing"), /*#__PURE__*/ React.createElement("li", { id: "appointmentScheduler", draggable: "true", onDragStart: handleDragStart, className: "bg-gray-100 p-2 rounded-md cursor-grab hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 51, columnNumber: 15 }, __self: this }, "Appointment Scheduler"), /*#__PURE__*/ React.createElement("li", { id: "analyticsDashboard", draggable: "true", onDragStart: handleDragStart, className: "bg-gray-100 p-2 rounded-md cursor-grab hover:bg-gray-200 transition-colors", __source: { fileName: "", lineNumber: 54, columnNumber: 15 }, __self: this }, "Analytics Dashboard"))), /*#__PURE__*/ React.createElement("section", { onDrop: handleDrop, onDragOver: handleDragOver, className: "bg-[#f7f7f7] p-6 shadow-md rounded-lg md:col-span-2 lg:col-span-3", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl text-[#121212] font-bold mb-4", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Canvas"), /*#__PURE__*/ React.createElement("div", { className: "min-h-[500px] bg-[#f0f0f0] p-4 rounded-md flex flex-wrap items-start justify-start gap-4", style: { outline: dragging ? '2px dashed #121212' : 'none', outlineOffset: '-2px' }, __source: { fileName: "", lineNumber: 61, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, "Ready Made Templates"))))), /*#__PURE__*/ React.createElement("footer", { className: "bg-[#f7f7f7] py-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "container mx-auto px-4", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-center text-[#121212]", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "© 2023 Builder Platform, Inc. All rights reserved.")))); }