function MainComponent() { const [formData, setFormData] = React.useState({ bgImageDescription: 'mickey mouse', fontColor: '#ffffff', cardNumber: '', cardName: '', expiryDate: '' }); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row items-center justify-center m-10", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "w-full md:w-[300px] p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 9 }, __self: this }, "Background Image Description:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "bgImageDescription", value: formData.bgImageDescription, onChange: handleInputChange, className: "w-full mb-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Font Color:"), /*#__PURE__*/ React.createElement("input", { type: "color", name: "fontColor", value: formData.fontColor, onChange: handleInputChange, className: "w-full mb-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 9 }, __self: this }, "Card Number:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardNumber", value: formData.cardNumber, onChange: handleInputChange, className: "w-full mb-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Card Holder Name:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "cardName", value: formData.cardName, onChange: handleInputChange, className: "w-full mb-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("label", { className: "block mb-2 font-roboto", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "Expiry Date:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "expiryDate", value: formData.expiryDate, onChange: handleInputChange, className: "w-full mb-4 p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "w-full md:w-[500px] h-[300px] relative m-4", style: { backgroundImage: formData.bgImageDescription ? `url('/card.png')` : 'none', backgroundSize: 'cover', color: formData.fontColor, transform: 'slant(5deg)' }, __source: { fileName: "", lineNumber: 60, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full w-full p-4 text-white", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, formData.bgImageDescription && /*#__PURE__*/ React.createElement("img", { src: "/card.png", alt: formData.bgImageDescription, className: "absolute w-full h-full object-cover", __source: { fileName: "", lineNumber: 71, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative z-10", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-right", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Bank Name"), /*#__PURE__*/ React.createElement("div", { className: "mt-[80px] text-[18px] tracking-[3px]", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, formData.cardNumber), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between mt-4 text-[14px]", __source: { fileName: "", lineNumber: 80, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 81, columnNumber: 15 }, __self: this }, formData.cardName), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 82, columnNumber: 15 }, __self: this }, formData.expiryDate))))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 87, columnNumber: 7 }, __self: this }, ` .card:hover { transform: rotate(3deg); transition: transform 0.5s ease-in-out; } `)); } function StoryComponent() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 99, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { __source: { fileName: "", lineNumber: 100, columnNumber: 7 }, __self: this })); }