function PhotoScanButton({ onScan, isScanning }) { return /*#__PURE__*/ React.createElement("button", { onClick: ()=>onScan('photo'), disabled: isScanning, className: `bg-[#28a745] px-4 py-2 text-white rounded font-roboto mt-2 ${isScanning ? 'opacity-50 cursor-not-allowed' : ''}`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, isScanning ? 'Capturing...' : 'Take a Photo'); } function PhotoScanButtonStory() { const mockOnScan = (type)=>console.log(`${type} scan initiated`); return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 16, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(PhotoScanButton, { onScan: mockOnScan, isScanning: false, __source: { fileName: "", lineNumber: 17, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(PhotoScanButton, { onScan: mockOnScan, isScanning: true, __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this })); } function MainComponent({ onScan, isScanning, scannedIngredients }) { const hasScannedIngredients = scannedIngredients.length > 0; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center gap-4 p-4", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-2xl text-[#121212] mb-6", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, "Ingredient Scanner"), /*#__PURE__*/ React.createElement(PhotoScanButton, { onScan: onScan, isScanning: isScanning, __source: { fileName: "", lineNumber: 7, columnNumber: 7 }, __self: this }), hasScannedIngredients && /*#__PURE__*/ React.createElement("div", { className: "mt-6 w-full max-w-md", __source: { fileName: "", lineNumber: 9, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg text-[#121212] mb-4", __source: { fileName: "", lineNumber: 10, columnNumber: 11 }, __self: this }, "Detected Ingredients:"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc pl-8 text-[#121212]", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, scannedIngredients.map((ingredient, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, ingredient))))); } function StoryComponent() { const [isScanning, setIsScanning] = React.useState(false); const [scannedIngredients, setScannedIngredients] = React.useState([]); const onScan = ()=>{ setIsScanning(true); setTimeout(()=>{ setIsScanning(false); setScannedIngredients([ "Shea", "Jojoba Oil", "Apricot Oil", "Algae Extract", "Baobab", "Coconut Extract", "Avocado", "Marula", "Sesame Seed", "Olive Oil" ]); }, 3000); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(MainComponent, { onScan: onScan, isScanning: isScanning, scannedIngredients: scannedIngredients, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this })); }