function ChatBubble({ text, completed, onToggle }) { return /*#__PURE__*/ React.createElement("div", { className: `rounded-3xl p-4 max-w-[80%] inline-block ${completed ? "bg-green-100" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-3", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: completed, onChange: onToggle, className: "w-5 h-5 rounded-full", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("span", { className: "font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, text, completed && /*#__PURE__*/ React.createElement("i", { className: "fas fa-check text-green-500 ml-2", __source: { fileName: "", lineNumber: 15, columnNumber: 25 }, __self: this })))); } function ChatBubbleStory() { const [isCompleted, setIsCompleted] = useState(false); return /*#__PURE__*/ React.createElement("div", { className: "space-y-4 p-4", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatBubble, { text: "Buy groceries today", completed: false, onToggle: ()=>{}, __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatBubble, { text: "Call mom", completed: true, onToggle: ()=>{}, __source: { fileName: "", lineNumber: 32, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(ChatBubble, { text: "Interactive example", completed: isCompleted, onToggle: ()=>setIsCompleted(!isCompleted), __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this })); } function ChatInput() { const [message, setMessage] = useState(""); const handleSend = ()=>{ if (message.trim()) { setMessage(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 bg-[#E4DDD6]", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "bg-[#F0F2F5] px-4 py-2", __source: { fileName: "", lineNumber: 13, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center gap-2 bg-white rounded-full px-4 py-2", __source: { fileName: "", lineNumber: 14, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: message, onChange: (e)=>setMessage(e.target.value), className: "flex-1 outline-none font-roboto", placeholder: "Type a message", onKeyPress: (e)=>e.key === "Enter" && handleSend(), __source: { fileName: "", lineNumber: 15, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleSend, className: "text-[#00A884] hover:text-[#008069]", __source: { fileName: "", lineNumber: 24, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane text-xl", __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }))))); } function ChatInputStory() { return /*#__PURE__*/ React.createElement("div", { className: "h-screen", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInput, { __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); } function MainComponent() { const [reminders, setReminders] = useState([]); const handleSend = useCallback((message)=>{ setReminders([ ...reminders, { id: Date.now(), text: message, completed: false } ]); }, [ reminders ]); const toggleComplete = useCallback((id)=>{ setReminders(reminders.map((reminder)=>reminder.id === id ? { ...reminder, completed: !reminder.completed } : reminder)); }, [ reminders ]); const activeReminders = reminders.filter((r)=>!r.completed); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-screen bg-gray-100", __source: { fileName: "", lineNumber: 34, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-[#3498db] p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-white font-roboto text-center", __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Easetask")), /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4", __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, activeReminders.map((reminder)=>/*#__PURE__*/ React.createElement("div", { key: reminder.id, className: "flex items-center gap-2 mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "checkbox", checked: reminder.completed, onChange: ()=>toggleComplete(reminder.id), className: "w-4 h-4", __source: { fileName: "", lineNumber: 44, columnNumber: 13 }, __self: this }), /*#__PURE__*/ React.createElement(React.Fragment, null)))), /*#__PURE__*/ React.createElement("div", { className: "p-4 border-t", __source: { fileName: "", lineNumber: 55, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(React.Fragment, null))); }