function MainComponent() { const [searchTerm, setSearchTerm] = React.useState(''); const data = [ { id: 1, name: 'Info 1', value1: 'A1', value2: 'B1', value3: 'C1', value4: 'D1', value5: 'E1', value6: 'F1' }, { id: 2, name: 'Info 2', value1: 'A2', value2: 'B2', value3: 'C2', value4: 'D2', value5: 'E2', value6: 'F2' } ]; const filteredData = data.filter((item)=>item.name.toLowerCase().includes(searchTerm.toLowerCase())); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", placeholder: "Search...", className: "p-2 border border-gray-300 rounded w-full", onChange: (e)=>setSearchTerm(e.target.value), name: "search", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 gap-4", __source: { fileName: "", lineNumber: 21, columnNumber: 7 }, __self: this }, filteredData.map((item)=>/*#__PURE__*/ React.createElement("div", { key: item.id, className: "border p-4 rounded shadow-sm", __source: { fileName: "", lineNumber: 23, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold", __source: { fileName: "", lineNumber: 24, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: `/detail/${item.id}`, className: "text-blue-500 hover:underline", __source: { fileName: "", lineNumber: 25, columnNumber: 15 }, __self: this }, item.name)), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 27, columnNumber: 13 }, __self: this }, "Value1: ", item.value1), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 28, columnNumber: 13 }, __self: this }, "Value2: ", item.value2), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 29, columnNumber: 13 }, __self: this }, "Value3: ", item.value3), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Value4: ", item.value4), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 31, columnNumber: 13 }, __self: this }, "Value5: ", item.value5), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 32, columnNumber: 13 }, __self: this }, "Value6: ", item.value6))))); } function DetailComponent({ data }) { const [formData, setFormData] = React.useState(data); const handleInputChange = (e)=>{ const { name, value } = e.target; setFormData({ ...formData, [name]: value }); }; const handleSubmit = (e)=>{ e.preventDefault(); // Save logic here, such as sending formData to a Google Apps Script endpoint console.log('Saved data:', formData); }; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto p-4", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, formData.name), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, __source: { fileName: "", lineNumber: 57, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 58, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "value1", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 59, columnNumber: 11 }, __self: this }, "Value1"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "value1", name: "value1", value: formData.value1, onChange: handleInputChange, className: "p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 60, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "value2", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 70, columnNumber: 11 }, __self: this }, "Value2"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "value2", name: "value2", value: formData.value2, onChange: handleInputChange, className: "p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "value3", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, "Value3"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "value3", name: "value3", value: formData.value3, onChange: handleInputChange, className: "p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 91, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "value4", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 92, columnNumber: 11 }, __self: this }, "Value4"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "value4", name: "value4", value: formData.value4, onChange: handleInputChange, className: "p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 93, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 102, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "value5", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 103, columnNumber: 11 }, __self: this }, "Value5"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "value5", name: "value5", value: formData.value5, onChange: handleInputChange, className: "p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 104, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 113, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "value6", className: "block text-sm font-medium text-gray-700", __source: { fileName: "", lineNumber: 114, columnNumber: 11 }, __self: this }, "Value6"), /*#__PURE__*/ React.createElement("input", { type: "text", id: "value6", name: "value6", value: formData.value6, onChange: handleInputChange, className: "p-2 border border-gray-300 rounded w-full", __source: { fileName: "", lineNumber: 115, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "block bg-blue-500 text-white p-2 rounded", __source: { fileName: "", lineNumber: 124, columnNumber: 9 }, __self: this }, "Save"))); }