function MainComponent() { const [formValues, setFormValues] = React.useState({ signType: 'text', text: '', color: '#ffffff', signSize: '500mm', customSize: '', fontFamily: 'Bayshore', background: 'warehouse', specialRequests: '', customImage: null }); const handleChange = (e)=>{ if (e.target.name === 'customImage') { setFormValues({ ...formValues, [e.target.name]: e.target.files[0] }); } else { setFormValues({ ...formValues, [e.target.name]: e.target.value }); } }; const previewText = formValues.text || 'Your Text'; const signStyle = { color: formValues.color, fontSize: `${formValues.signSize === 'custom' ? formValues.customSize : formValues.signSize === '1000mm' ? '128px' : '64px'}`, fontFamily: `'${formValues.fontFamily}', cursive`, textShadow: `0 0 5px ${formValues.color}, 0 0 10px ${formValues.color}, 0 0 15px ${formValues.color}`, whiteSpace: 'pre-line', backgroundColor: formValues.background === 'custom' ? formValues.customBackground : 'none' }; const backgroundClasses = { warehouse: 'bg-[url("/images/warehouse-background.jpg")] bg-cover', red: 'bg-red-500', blue: 'bg-blue-500', custom: '' }; const previewBackgroundClass = backgroundClasses[formValues.background] || backgroundClasses.warehouse; const isCustomTextSign = formValues.signType === 'text'; return /*#__PURE__*/ React.createElement("div", { className: `flex flex-col lg:flex-row items-center lg:items-start justify-center min-h-screen font-roboto ${previewBackgroundClass}`, __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2 p-8 lg:p-24 lg:pt-12 lg:pb-6 bg-[#f6f6f6] lg:bg-transparent", __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 48, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-bars fa-lg text-[#202020]", __source: { fileName: "", lineNumber: 49, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "lg:hidden mb-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-shopping-cart fa-lg text-[#202020]", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: `lg:overflow-hidden rounded-lg lg:rounded-none p-16 lg:border lg:border-gray-200 ${previewBackgroundClass}`, __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, isCustomTextSign && /*#__PURE__*/ React.createElement("div", { className: "inline-block text-4xl font-semibold leading-none text-[#0000ff]", style: signStyle, __source: { fileName: "", lineNumber: 56, columnNumber: 13 }, __self: this }, previewText), /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-2 mt-4", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "text-lg font-bold text-[#202020]", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, "Background:", /*#__PURE__*/ React.createElement("select", { id: "background", name: "background", value: formValues.background, onChange: handleChange, className: "ml-2 px-2 border rounded shadow-inner text-black", __source: { fileName: "", lineNumber: 62, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "warehouse", __source: { fileName: "", lineNumber: 63, columnNumber: 17 }, __self: this }, "Warehouse"), /*#__PURE__*/ React.createElement("option", { value: "red", __source: { fileName: "", lineNumber: 64, columnNumber: 17 }, __self: this }, "Red"), /*#__PURE__*/ React.createElement("option", { value: "blue", __source: { fileName: "", lineNumber: 65, columnNumber: 17 }, __self: this }, "Blue"), /*#__PURE__*/ React.createElement("option", { value: "custom", __source: { fileName: "", lineNumber: 66, columnNumber: 17 }, __self: this }, "Custom"))), formValues.background === 'custom' && /*#__PURE__*/ React.createElement("input", { type: "color", id: "customBackground", name: "customBackground", value: formValues.customBackground, onChange: handleChange, className: "ml-2 border rounded shadow-inner", __source: { fileName: "", lineNumber: 70, columnNumber: 15 }, __self: this })))), /*#__PURE__*/ React.createElement("div", { className: "w-full lg:w-1/2 px-12 py-10 bg-white rounded-lg lg:rounded-none lg:shadow-xl lg:mb-10", __source: { fileName: "", lineNumber: 75, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col gap-8", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }))); }