function MainComponent() { const [userInput, setUserInput] = React.useState(''); const [danielResponse, setDanielResponse] = React.useState(''); const [isPetting, setIsPetting] = React.useState(false); const [isHighFiving, setIsHighFiving] = React.useState(false); const [isPouring, setIsPouring] = React.useState(false); const [isRecording, setIsRecording] = React.useState(false); const handleTalk = ()=>{ setDanielResponse(`(In a funny voice) ${userInput}`); }; const handlePet = ()=>{ setIsPetting(true); setTimeout(()=>setIsPetting(false), 1000); }; const handlePoke = (bodyPart)=>{ setDanielResponse(`Ouch! You poked my ${bodyPart}!`); }; const handleHighFive = ()=>{ setIsHighFiving(true); setTimeout(()=>setIsHighFiving(false), 1000); }; const handlePourMilk = ()=>{ setIsPouring(true); setTimeout(()=>setIsPouring(false), 2000); }; const handleRecord = ()=>{ setIsRecording(!isRecording); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 37, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 38, columnNumber: 7 }, __self: this }, "Talking Daniel Cook"), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 w-full max-w-md", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 41, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "userInput", value: userInput, onChange: (e)=>setUserInput(e.target.value), className: "w-full px-3 py-2 border rounded", placeholder: "Say something to Daniel", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleTalk, className: "mt-2 bg-blue-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 50, columnNumber: 11 }, __self: this }, "Talk to Daniel")), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 55, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-italic", __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, danielResponse)), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mb-4", __source: { fileName: "", lineNumber: 59, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handlePet, className: "bg-green-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this }, "Pet Daniel"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePoke('head'), className: "bg-yellow-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, "Poke Head"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePoke('belly'), className: "bg-orange-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this }, "Poke Belly"), /*#__PURE__*/ React.createElement("button", { onClick: ()=>handlePoke('feet'), className: "bg-red-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 69, columnNumber: 11 }, __self: this }, "Poke Feet")), /*#__PURE__*/ React.createElement("div", { className: "flex justify-around mb-4", __source: { fileName: "", lineNumber: 74, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleHighFive, className: "bg-purple-500 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-hand-paper", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }), " High Five"), /*#__PURE__*/ React.createElement("button", { onClick: handlePourMilk, className: "bg-blue-300 text-white px-4 py-2 rounded", __source: { fileName: "", lineNumber: 78, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-glass-whiskey", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }), " Pour Milk"), /*#__PURE__*/ React.createElement("button", { onClick: handleRecord, className: `bg-${isRecording ? 'red' : 'gray'}-500 text-white px-4 py-2 rounded`, __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-record-vinyl", __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }), " ", isRecording ? 'Stop' : 'Rec'))), isPetting && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl", __source: { fileName: "", lineNumber: 87, columnNumber: 21 }, __self: this }, "😊 Daniel is happy!"), isHighFiving && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl", __source: { fileName: "", lineNumber: 88, columnNumber: 24 }, __self: this }, "🖐 High five!"), isPouring && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl", __source: { fileName: "", lineNumber: 89, columnNumber: 21 }, __self: this }, "🥛 Pouring milk for Daniel..."), isRecording && /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-xl", __source: { fileName: "", lineNumber: 90, columnNumber: 23 }, __self: this }, "🔴 Recording..."), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 92, columnNumber: 7 }, __self: this }, ` @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } `)); }