function ContactInputField({ contacts, setContacts }) { return /*#__PURE__*/ React.createElement("textarea", { name: "contacts", id: "contacts", value: contacts, onChange: (e)=>setContacts(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "Enter contacts, separated by commas", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function ContactInputFieldStory() { const [contacts, setContacts] = React.useState(""); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ContactInputField, { contacts: contacts, setContacts: setContacts, __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this })); } function ActivityMateDisplay({ appName }) { return /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-4 font-roboto", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, appName); } function ActivityMateDisplayStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ActivityMateDisplay, { appName: "ActivityMate!", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this })); } function MainComponent() { const [activity, setActivity] = React.useState(""); const [contacts, setContacts] = React.useState(""); const [activityGroups, setActivityGroups] = React.useState([ { activity: "Sports", contacts: [ "John", "Jane", "Doe" ] }, { activity: "Coffee", contacts: [ "Alice", "Bob", "Charlie" ] } ]); const handleSubmit = (e)=>{ e.preventDefault(); const newGroup = { activity, contacts: contacts.split(",").map((contact)=>contact.trim()) }; setActivityGroups([ ...activityGroups, newGroup ]); setActivity(""); setContacts(""); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ActivityMateDisplay, { appName: "ActivityMate", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("form", { className: "mb-4", onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-1", htmlFor: "activity", __source: { fileName: "", lineNumber: 22, columnNumber: 11 }, __self: this }, "Activity:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "activity", id: "activity", value: activity, onChange: (e)=>setActivity(e.target.value), className: "w-full p-2 border border-gray-300 rounded", placeholder: "Enter activity (e.g., sports, coffee)", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-2", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto mb-1", htmlFor: "contacts", __source: { fileName: "", lineNumber: 26, columnNumber: 11 }, __self: this }, "Contacts:"), /*#__PURE__*/ React.createElement(ContactInputField, { contacts: contacts, setContacts: setContacts, __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, "Create Group")), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 31, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2 font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, "Your Activity Groups"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, activityGroups.map((group, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "mb-1", __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, group.activity, ": ", group.contacts.join(", ")))))); }