function MainComponent() { const [activeTab, setActiveTab] = React.useState(0); const [uploadedImage, setUploadedImage] = React.useState(null); const [plantName, setPlantName] = React.useState(''); const tabContent = [ { label: "Diagnose Disease", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212] mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Snap a photo of your plant, and we'll diagnose the disease and provide a cure."), /*#__PURE__*/ React.createElement("label", { className: "bg-[#4CAF50] text-white font-roboto py-2 px-4 rounded cursor-pointer shadow-lg hover:bg-[#388E3C] transition duration-300", __source: { fileName: "", lineNumber: 13, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fa fa-camera mr-2", __source: { fileName: "", lineNumber: 14, columnNumber: 13 }, __self: this }), "Take Photo", /*#__PURE__*/ React.createElement("input", { type: "file", name: "plantImage", accept: "image/*", className: "hidden", onChange: (e)=>setUploadedImage(e.target.files[0]), __source: { fileName: "", lineNumber: 16, columnNumber: 13 }, __self: this })), uploadedImage && /*#__PURE__*/ React.createElement("div", { className: "mt-4 font-roboto text-base text-[#388E3C]", __source: { fileName: "", lineNumber: 25, columnNumber: 13 }, __self: this }, "Image uploaded. Analyzing...")) }, { label: "Planting Guide", content: /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center p-4", __source: { fileName: "", lineNumber: 35, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-lg text-[#121212] mb-4", __source: { fileName: "", lineNumber: 36, columnNumber: 11 }, __self: this }, "Enter the plant name to get a full planting guide, from seed to harvest."), /*#__PURE__*/ React.createElement("input", { type: "text", name: "plantName", placeholder: "Type plant name here", className: "w-full p-2 border border-[#BDBDBD] rounded mb-4", value: plantName, onChange: (e)=>setPlantName(e.target.value), __source: { fileName: "", lineNumber: 39, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4CAF50] text-white font-roboto py-2 px-4 rounded shadow-lg hover:bg-[#388E3C] transition duration-300", __source: { fileName: "", lineNumber: 47, columnNumber: 11 }, __self: this }, "Get Guide")) } ]; return /*#__PURE__*/ React.createElement("div", { className: "font-roboto flex flex-col min-h-screen bg-[#F5F5F5]", __source: { fileName: "", lineNumber: 55, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-[#009688] p-6 text-white text-center text-xl", __source: { fileName: "", lineNumber: 56, columnNumber: 7 }, __self: this }, "AI Plant Disease Diagnoser & Planting Guide"), /*#__PURE__*/ React.createElement("div", { className: "flex-grow", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "border-b border-[#BDBDBD] flex overflow-x-auto", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, tabContent.map((tab, index)=>/*#__PURE__*/ React.createElement("button", { key: index, className: `whitespace-nowrap p-4 font-roboto text-[#757575] hover:text-[#009688] focus:text-[#009688] focus:outline-none ${index === activeTab ? 'border-b-2 border-[#009688] text-[#009688]' : ''}`, style: { flexShrink: 0 }, onClick: ()=>setActiveTab(index), __source: { fileName: "", lineNumber: 62, columnNumber: 13 }, __self: this }, tab.label))), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 72, columnNumber: 9 }, __self: this }, tabContent.map((tab, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "p-4", style: { display: activeTab === index ? 'block' : 'none' }, __source: { fileName: "", lineNumber: 74, columnNumber: 13 }, __self: this }, tab.content)))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 80, columnNumber: 7 }, __self: this }, ` @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } `)); }