function MainComponent() { const [activities, setActivities] = React.useState([]); const [filteredActivities, setFilteredActivities] = React.useState([]); const [filter, setFilter] = React.useState(''); const [dogs, setDogs] = React.useState([ { name: "Max", picture: "/images/max.png", color: "bg-blue-300" }, { name: "Bella", picture: "/images/bella.png", color: "bg-pink-300" } ]); const handleFilterChange = (e)=>{ const value = e.target.value.toLowerCase(); setFilter(value); if (value) { setFilteredActivities(activities.filter((activity)=>activity.eventName.toLowerCase().includes(value) || activity.dog.toLowerCase().includes(value) || activity.sport.toLowerCase().includes(value))); } else { setFilteredActivities(activities); } }; const sportColors = { agility: "text-blue-600", obedience: "text-green-600", "rally obedience": "text-yellow-600", nosework: "text-red-600", "blood tracking": "text-purple-600" }; const activityTypeColors = { training: "bg-blue-200", seminar: "bg-green-200", competition: "bg-red-200" }; const dogProfileElements = dogs.map((dog)=>/*#__PURE__*/ React.createElement("div", { key: dog.name, className: `p-2 ${dog.color} rounded shadow-lg`, __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: dog.picture, alt: `${dog.name} the dog`, className: "w-20 h-20 rounded-full", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }))); const activityElements = filteredActivities.length > 0 ? filteredActivities : activities; const activityCardElements = activityElements.map((activity)=>/*#__PURE__*/ React.createElement("div", { key: activity.id, className: `${activityTypeColors[activity.type]} p-4 rounded shadow-md`, __source: { fileName: "", lineNumber: 46, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: `font-semibold ${sportColors[activity.sport]} mb-2`, __source: { fileName: "", lineNumber: 47, columnNumber: 7 }, __self: this }, activity.eventName), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, activity.time, " - ", activity.place), /*#__PURE__*/ React.createElement("p", { className: "text-gray-600", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, activity.environment), activity.subActivities.map((subActivity)=>/*#__PURE__*/ React.createElement("div", { key: subActivity.id, className: "mt-4", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-semibold", __source: { fileName: "", lineNumber: 52, columnNumber: 11 }, __self: this }, "Dog: ", subActivity.dog), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 53, columnNumber: 11 }, __self: this }, "Performance: ", subActivity.performance), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Thoughts: ", subActivity.thoughts), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "Went well: ", subActivity.wentWell), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 56, columnNumber: 11 }, __self: this }, "Can improve: ", subActivity.canImprove), subActivity.placement && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 57, columnNumber: 37 }, __self: this }, "Placement: ", subActivity.placement), subActivity.repetitions && /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 58, columnNumber: 39 }, __self: this }, "Repetitions: ", subActivity.repetitions))))); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col min-h-screen bg-blue-50", __source: { fileName: "", lineNumber: 65, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "bg-blue-600 text-white p-4 text-center font-semibold text-lg", __source: { fileName: "", lineNumber: 66, columnNumber: 7 }, __self: this }, "Dog Training Diary"), /*#__PURE__*/ React.createElement("div", { className: "overflow-auto p-4", __source: { fileName: "", lineNumber: 69, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl mb-2 text-blue-600", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, "My Dogs"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-2 overflow-auto", __source: { fileName: "", lineNumber: 72, columnNumber: 11 }, __self: this }, dogProfileElements)), /*#__PURE__*/ React.createElement("section", { className: "mb-4", __source: { fileName: "", lineNumber: 76, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-semibold text-xl text-blue-600", __source: { fileName: "", lineNumber: 78, columnNumber: 13 }, __self: this }, "Activities"), /*#__PURE__*/ React.createElement("button", { className: "px-4 py-2 bg-blue-500 text-white rounded-md", __source: { fileName: "", lineNumber: 79, columnNumber: 13 }, __self: this }, "Add Activity")), /*#__PURE__*/ React.createElement("input", { className: "w-full px-3 py-2 border rounded-md mb-4", type: "text", placeholder: "Search activities...", name: "search", onChange: handleFilterChange, __source: { fileName: "", lineNumber: 83, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3", __source: { fileName: "", lineNumber: 90, columnNumber: 11 }, __self: this }, activityCardElements))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 95, columnNumber: 7 }, __self: this }, ` body { font-family: 'Roboto', sans-serif; } input, button { font-family: inherit; } `)); }