function GroceryPriceComparison({ title }) { return /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold text-center font-crimson-text", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, title); } function GroceryPriceComparisonStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 9, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GroceryPriceComparison, { title: "Grocery Price Comparison", __source: { fileName: "", lineNumber: 10, columnNumber: 7 }, __self: this })); } function MainComponent() { const products = [ { name: "Apple", prices: { store1: 1.50, store2: 1.40, store3: 1.55 } }, { name: "Banana", prices: { store1: 0.50, store2: 0.45, store3: 0.55 } }, { name: "Carrot", prices: { store1: 0.70, store2: 0.60, store3: 0.75 } } ]; const [searchQuery, setSearchQuery] = React.useState(""); const [shoppingList, setShoppingList] = React.useState([]); const [userName, setUserName] = React.useState("John Doe"); const [ratings, setRatings] = React.useState({}); const [priceComparisons, setPriceComparisons] = React.useState({}); const [weeklyFlyers, setWeeklyFlyers] = React.useState([]); const handleSearchChange = (e)=>{ setSearchQuery(e.target.value); }; const filteredProducts = products.filter((product)=>product.name.toLowerCase().includes(searchQuery.toLowerCase())); const handleAddToList = (product)=>{ setShoppingList([ ...shoppingList, product ]); }; const handleRatingChange = (store, product, rating)=>{ setRatings({ ...ratings, [product]: { ...ratings[product] || {}, [store]: rating } }); }; const fetchPriceComparisons = ()=>{ const comparisons = { Apple: { store1: 1.50, store2: 1.40, store3: 1.55 }, Banana: { store1: 0.50, store2: 0.45, store3: 0.55 }, Carrot: { store1: 0.70, store2: 0.60, store3: 0.75 } }; setPriceComparisons(comparisons); }; const fetchWeeklyFlyers = ()=>{ const flyers = [ { store: "Store 1", promotion: "10% off on all fruits" }, { store: "Store 2", promotion: "Buy 1 Get 1 Free on Bananas" } ]; setWeeklyFlyers(flyers); }; const recommendedProduct = "Orange"; React.useEffect(()=>{ fetchPriceComparisons(); fetchWeeklyFlyers(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[800px] mx-auto mt-10", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GroceryPriceComparison, { title: "Grocery Price Comparison", __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 text-center font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 64, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 65, columnNumber: 9 }, __self: this }, "Welcome, ", userName)), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 67, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto text-[#121212]", htmlFor: "search", __source: { fileName: "", lineNumber: 68, columnNumber: 9 }, __self: this }, "Search for a product:"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "search", id: "search", value: searchQuery, onChange: handleSearchChange, placeholder: "Enter product name...", className: "p-2 border rounded w-full font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto mt-6", __source: { fileName: "", lineNumber: 79, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("table", { className: "min-w-full bg-white", __source: { fileName: "", lineNumber: 80, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("thead", { __source: { fileName: "", lineNumber: 81, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("tr", { __source: { fileName: "", lineNumber: 82, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-semibold text-[#010101] font-roboto", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Product"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-semibold text-[#010101] font-roboto", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "Store 1"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-semibold text-[#010101] font-roboto", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "Store 2"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-semibold text-[#010101] font-roboto", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Store 3"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-semibold text-[#010101] font-roboto", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Action"), /*#__PURE__*/ React.createElement("th", { className: "py-2 px-4 border-b font-semibold text-[#010101] font-roboto", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Rating"))), /*#__PURE__*/ React.createElement("tbody", { __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, filteredProducts.map((product, index)=>{ const { store1, store2, store3 } = product.prices; const minPrice = Math.min(store1, store2, store3); return /*#__PURE__*/ React.createElement("tr", { key: index, className: "text-center", __source: { fileName: "", lineNumber: 97, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 98, columnNumber: 19 }, __self: this }, product.name), /*#__PURE__*/ React.createElement("td", { className: `py-2 px-4 border-b text-[#121212] font-roboto ${store1 === minPrice ? 'bg-[#e0ffe0]' : ''}`, __source: { fileName: "", lineNumber: 99, columnNumber: 19 }, __self: this }, "$", store1.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: `py-2 px-4 border-b text-[#121212] font-roboto ${store2 === minPrice ? 'bg-[#e0ffe0]' : ''}`, __source: { fileName: "", lineNumber: 100, columnNumber: 19 }, __self: this }, "$", store2.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: `py-2 px-4 border-b text-[#121212] font-roboto ${store3 === minPrice ? 'bg-[#e0ffe0]' : ''}`, __source: { fileName: "", lineNumber: 101, columnNumber: 19 }, __self: this }, "$", store3.toFixed(2)), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 102, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleAddToList(product), className: "bg-[#4CAF50] text-white px-2 py-1 rounded", __source: { fileName: "", lineNumber: 103, columnNumber: 21 }, __self: this }, "Add to List")), /*#__PURE__*/ React.createElement("td", { className: "py-2 px-4 border-b text-[#121212] font-roboto", __source: { fileName: "", lineNumber: 110, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "number", name: "rating", min: "1", max: "5", value: ratings[product.name] && ratings[product.name].store1 || "", onChange: (e)=>handleRatingChange("store1", product.name, e.target.value), className: "p-1 border rounded w-full font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 111, columnNumber: 21 }, __self: this }))); })))), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(GroceryPriceComparison, { title: "Shopping List", __source: { fileName: "", lineNumber: 128, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "mt-4", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, shoppingList.map((product, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 131, columnNumber: 13 }, __self: this }, product.name)))), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 137, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(GroceryPriceComparison, { title: "Smart Recommendations", __source: { fileName: "", lineNumber: 138, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 139, columnNumber: 9 }, __self: this }, "Based on your search, we recommend: ", recommendedProduct)), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(GroceryPriceComparison, { title: "User Preferences", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("p", { className: "mt-4 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 143, columnNumber: 9 }, __self: this }, "Your preferences will be used to personalize your experience.")), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(GroceryPriceComparison, { title: "Turn-by-Turn Directions", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "bg-[#4CAF50] text-white px-2 py-1 rounded mt-4 font-roboto", __source: { fileName: "", lineNumber: 147, columnNumber: 9 }, __self: this }, "Navigate to Nearest Store")), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 151, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(GroceryPriceComparison, { title: "Weekly Flyers & Promotions", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("ul", { className: "mt-4", __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, weeklyFlyers.map((flyer, index)=>/*#__PURE__*/ React.createElement("li", { key: index, className: "py-2 font-roboto text-[#121212]", __source: { fileName: "", lineNumber: 155, columnNumber: 13 }, __self: this }, flyer.store, ": ", flyer.promotion)))), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 161, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-10", __source: { fileName: "", lineNumber: 164, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement(GroceryPriceComparison, { title: "Secure Authentication & Privacy Protection", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }))); }

Product	Store 1	Store 2	Store 3
Apple	$1.50	$1.40	$1.55
Banana	$0.50	$0.45	$0.55
Carrot	$0.70	$0.60	$0.75