function FolderPathInterface({ folderPath, handleInputChange }) { return /*#__PURE__*/ React.createElement("input", { name: "folderPath", type: "text", value: folderPath, onChange: handleInputChange, className: "w-full p-2 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function FolderPathInterfaceStory() { const [folderPath, setFolderPath] = React.useState(""); const handleInputChange = (e)=>{ setFolderPath(e.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(FolderPathInterface, { folderPath: folderPath, handleInputChange: handleInputChange, __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this })); } function MainComponent() { const [folderPath, setFolderPath] = React.useState(''); const [imagingData, setImagingData] = React.useState(null); const handleInputChange = (e)=>setFolderPath(e.target.value); const handleAnalyze = ()=>{ const dummyData = { totalImagingTime: '5 hours', filters: { H_alpha: '2 hours', Luminance: '3 hours' } }; setImagingData(dummyData); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 font-roboto", __source: { fileName: "", lineNumber: 18, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-bold mb-4", __source: { fileName: "", lineNumber: 19, columnNumber: 7 }, __self: this }, "Astrophotography Image Analyzer"), /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 20, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block mb-2", __source: { fileName: "", lineNumber: 21, columnNumber: 9 }, __self: this }, "Local Folder Path:"), /*#__PURE__*/ React.createElement(FolderPathInterface, { folderPath: folderPath, handleInputChange: handleInputChange, __source: { fileName: "", lineNumber: 22, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("button", { onClick: handleAnalyze, className: "p-2 bg-blue-500 text-white rounded", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, "Analyze Images"), imagingData && /*#__PURE__*/ React.createElement("div", { className: "mt-4 p-4 border border-gray-300 rounded", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 27, columnNumber: 11 }, __self: this }, "Imaging Statistics"), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }, "Total Imaging Time: ", imagingData.totalImagingTime), /*#__PURE__*/ React.createElement("div", { className: "mt-2", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold", __source: { fileName: "", lineNumber: 30, columnNumber: 13 }, __self: this }, "Per Filter:"), Object.keys(imagingData.filters).map((filter)=>/*#__PURE__*/ React.createElement("p", { key: filter, __source: { fileName: "", lineNumber: 32, columnNumber: 15 }, __self: this }, `${filter}: ${imagingData.filters[filter]}`))))); }