function OutlineButton({ text, onClick, bgColor = 'bg-white' }) { const textColor = bgColor === 'bg-white' ? 'text-black' : 'text-white'; return /*#__PURE__*/ React.createElement("button", { className: `px-8 py-2 rounded-full border border-current ${textColor} font-inter bg-transparent hover:bg-opacity-10 transition-colors duration-300 w-[240px] h-[60px]`, onClick: onClick, __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, text); } function OutlineButtonStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 flex flex-col space-y-4 justify-center items-center h-screen bg-gray-100", __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(OutlineButton, { text: "Click me", onClick: ()=>alert('Button clicked!'), __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(OutlineButton, { text: "Dark version", onClick: ()=>alert('Dark button clicked!'), bgColor: "bg-black", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent() { const [checkedItems, setCheckedItems] = React.useState({}); const [budget, setBudget] = React.useState(0); const handleCheckboxChange = (event)=>{ setCheckedItems({ ...checkedItems, [event.target.name]: event.target.checked }); }; const handleBudgetChange = (event)=>{ setBudget(Number(event.target.value)); }; const expenses = [ { name: "ATTIRE", cost: 2000 }, { name: "BEAUTY", cost: 500 }, { name: "CAKE", cost: 500 }, { name: "CEREMONY", cost: 1000 }, { name: "INVITES + PAPER", cost: 400 }, { name: "MUSIC", cost: 1500 }, { name: "PHOTOS + VIDEO", cost: 3000 }, { name: "RECEPTION VENUE", cost: 5000 }, { name: "DRINKS", cost: 2000 }, { name: "FOOD", cost: 5000 }, { name: "FAVORS + GIFTS", cost: 500 }, { name: "FLOWERS + DECOR", cost: 2000 }, { name: "TRANSPORTATION", cost: 800 }, { name: "WEDDING PLANNER", cost: 3000 }, { name: "WEDDING RINGS", cost: 2000 }, { name: "OFFICIANT", cost: 500 }, { name: "HONEYMOON", cost: 5000 }, { name: "EXTRA FEES/EMERGENCY FUND", cost: 2000 } ]; const totalCost = expenses.reduce((total, item)=>{ return checkedItems[item.name] ? total + item.cost : total; }, 0); const remainingBudget = budget - totalCost; return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4 font-roboto bg-[#FFF0F5] flex flex-col min-h-screen", __source: { fileName: "", lineNumber: 41, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("head", { __source: { fileName: "", lineNumber: 42, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("link", { rel: "icon", href: "data:image/svg+xml,", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold mb-6 text-center text-[#FF69B4]", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Wedding Budget Planner"), /*#__PURE__*/ React.createElement("div", { className: "mb-6", __source: { fileName: "", lineNumber: 52, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "budget", className: "block mb-2 text-lg font-medium text-[#FF69B4]", __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Set Your Budget:"), /*#__PURE__*/ React.createElement("input", { type: "number", id: "budget", className: "w-full p-2 border border-[#FFB6C1] rounded", value: budget, onChange: handleBudgetChange, __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 67, columnNumber: 9 }, __self: this }, expenses.map((item, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between p-4 bg-white border border-[#FFB6C1] rounded-lg transition-all duration-300 hover:shadow-md", __source: { fileName: "", lineNumber: 69, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 73, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", id: `item-${index}`, name: item.name, className: "form-checkbox h-5 w-5 text-[#FF69B4]", onChange: handleCheckboxChange, checked: checkedItems[item.name] || false, __source: { fileName: "", lineNumber: 74, columnNumber: 17 }, __self: this }), /*#__PURE__*/ React.createElement("label", { htmlFor: `item-${index}`, className: "flex-grow text-[#FF69B4]", __source: { fileName: "", lineNumber: 82, columnNumber: 17 }, __self: this }, item.name)), /*#__PURE__*/ React.createElement("span", { className: `font-semibold ${checkedItems[item.name] ? "text-[#4caf50]" : "text-[#FF69B4]"}`, __source: { fileName: "", lineNumber: 89, columnNumber: 15 }, __self: this }, "$", item.cost.toLocaleString())))), /*#__PURE__*/ React.createElement("div", { className: "mt-8 p-4 bg-white border border-[#FFB6C1] rounded-lg shadow-md", __source: { fileName: "", lineNumber: 97, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-[#FF69B4]", __source: { fileName: "", lineNumber: 98, columnNumber: 11 }, __self: this }, "Total Cost:", " ", /*#__PURE__*/ React.createElement("span", { className: "text-[#4caf50]", __source: { fileName: "", lineNumber: 100, columnNumber: 13 }, __self: this }, "$", totalCost.toLocaleString())), /*#__PURE__*/ React.createElement("p", { className: "text-xl font-bold text-[#FF69B4] mt-2", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this }, "Remaining Budget:", " ", /*#__PURE__*/ React.createElement("span", { className: remainingBudget >= 0 ? "text-[#4caf50]" : "text-[#f44336]", __source: { fileName: "", lineNumber: 106, columnNumber: 13 }, __self: this }, "$", remainingBudget.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "mt-8", __source: { fileName: "", lineNumber: 115, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("iframe", { width: "100%", height: "480px", src: "https://forms.office.com/Pages/ResponsePage.aspx?id=DQSIkWdsW0yxEjajBLZtrQAAAAAAAAAAAANAAQBqES9UNUZXSjUyTllRT1ZQVVFMWTYzSDZOOVhNOS4u&embed=true", frameBorder: "0", style: { border: "none", maxWidth: "100%", maxHeight: "100vh" }, allowFullScreen: true, __source: { fileName: "", lineNumber: 116, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("footer", { className: "mt-8 py-4 text-center text-[#FF69B4] border-t border-[#FFB6C1]", __source: { fileName: "", lineNumber: 126, columnNumber: 7 }, __self: this }, "Powered by Five Stars App Solutions")); }