function BirthdayWishButton({ processing }) { return /*#__PURE__*/ React.createElement("button", { type: "submit", disabled: processing, className: `w-full rounded ${processing ? 'bg-[#999]' : 'bg-[#4F46E5] hover:bg-[#4338CA]'} py-2 text-white font-roboto`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, processing ? 'Creating Wish...' : 'Create Birthday Wish'); } function BirthdayWishButtonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BirthdayWishButton, { processing: false, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BirthdayWishButton, { processing: true, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this })); } function MainComponent() { const [name, setName] = React.useState(""); const [processing, setProcessing] = React.useState(false); const [result, setResult] = React.useState(""); const handleNameChange = (event)=>{ setName(event.target.value); setResult(""); }; const handleSubmit = async (event)=>{ event.preventDefault(); if (!name) return; setProcessing(true); try { const formData = new FormData(); formData.append('name', name); const response = await fetch('https://api.example.com/birthday-wish', { method: 'POST', body: formData }); if (response.ok) { const data = await response.json(); setResult(`Happy birthday ${name}. ${data.message}`); const utterance = new SpeechSynthesisUtterance(`Happy birthday ${name}, long life.`); speechSynthesis.speak(utterance); } else { console.error('Failed to create birthday wish'); } } finally{ setProcessing(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#F3F4F6]", __source: { fileName: "", lineNumber: 40, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "p-4 md:w-[600px] w-full bg-white rounded-lg shadow", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-center text-[#121212] mb-6 text-2xl", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, "Birthday Wish Music Maker"), /*#__PURE__*/ React.createElement("form", { className: "space-y-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 45, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col", __source: { fileName: "", lineNumber: 46, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "font-roboto mb-2 text-[#121212]", __source: { fileName: "", lineNumber: 47, columnNumber: 13 }, __self: this }, "Enter Name"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "name", name: "name", className: "border rounded px-4 py-2 w-full", onChange: handleNameChange, __source: { fileName: "", lineNumber: 50, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement(BirthdayWishButton, { processing: processing, __source: { fileName: "", lineNumber: 58, columnNumber: 11 }, __self: this })), result && /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto mb-2 text-[#121212] block", __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, "Your Birthday Wish"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, result)))); }