{"version":3,"sources":["components/Header/Header.js","components/Cart/Cart.js","components/Product/Product.js","components/Shop/Shop.js","App.js","reportWebVitals.js","index.js"],"names":["Header","className","href","Cart","props","cart","console","log","total","reduce","previous","product","price","shipping","tax","grand","length","toFixed","Product","img","name","seller","stock","logo","icon","faShoppingCart","src","alt","onClick","addToCart","Shop","useState","products","setProducts","setCart","useEffect","fetch","then","res","json","data","newCart","map","key","App","reportWebVitals","onPerfEntry","Function","getCLS","getFID","getFCP","getLCP","getTTFB","ReactDOM","render","StrictMode","document","getElementById"],"mappings":"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","file":"static/js/main.c533f7e2.chunk.js","sourcesContent":["import React from 'react';\nimport './header.css';\n\nconst Header = () => {\n    return (\n        <div className=\"header\">\n            <div className=\"logo\">\n                <h1>AL Store.</h1>\n            </div>\n            <nav className=\"navbar\">\n                <ul>\n                    <li><a href=\"/home\">Home</a></li>\n                    <li><a href=\"/home\">Shop</a></li>\n                    <li><a href=\"/home\">About</a></li>\n                    <li><a href=\"/home\">Cart</a></li>\n                </ul>\n            </nav>\n        </div>\n\n    );\n};\n\nexport default Header;","import React from 'react';\nimport './cart.css';\n\nconst Cart = (props) => {\n    const { cart } = props;\n    console.log(cart);\n\n    const total = cart.reduce((previous, product) => previous + product.price, 0);\n\n    const shipping = cart.reduce((previous, product) => previous + product.shipping, 0);\n    \n    const tax = (total + shipping) / 10;\n    const grand = total + shipping + tax;\n    return (\n        <div className=\"cart-box\">\n            <h2>Order Summery</h2>\n            <table>\n                <tr>\n                    <td><h3>Items Ordered</h3></td>\n                    <td><h3>{cart.length}</h3></td>\n                </tr>\n                <tr>\n                    <td><h3>Total Amount</h3></td>\n                    <td><h3>$ {total.toFixed(2)}</h3></td>\n                </tr>\n                <tr>\n                    <td><h3>Shipping Cost</h3></td>\n                    <td><h3>$ {shipping.toFixed(2)}</h3></td>\n                </tr>\n                <tr className=\"table-border\">\n                    <td><h3>Tax</h3></td>\n                    <td><h3>$ {tax.toFixed(2)}</h3></td>\n                </tr>\n                <tr>\n                    <td><h3>Grand Total</h3></td>\n                    <td><h3>$  {grand.toFixed(2)}</h3></td>\n                </tr>\n            </table>\n\n        </div >\n    );\n};\n\nexport default Cart;","import React from 'react';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\nimport { faShoppingCart } from '@fortawesome/free-solid-svg-icons'\nimport './product.css';\n\nconst Product = (props) => {\n    const { img, name, seller, price, stock } = props.product;\n    const logo = <FontAwesomeIcon icon={faShoppingCart} />\n    return (\n        <div className=\"product\">\n            <div className=\"shop-card\">\n                <div className=\"img\">\n                    <img src={img} alt=\"\" />\n                </div>\n                <div className=\"details\">\n                    <h2>{name}</h2>\n                    <p><small>by: {seller}</small></p>\n                    <h2>${price}</h2>\n                    <p>only {stock} left in stock - order soon</p>\n                    <button onClick={() => props.addToCart(props.product)} className=\"btn-regular\">{logo} Add to Cart</button>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default Product;","import React, { useEffect, useState } from 'react';\nimport Cart from '../Cart/Cart';\nimport Product from '../Product/Product';\nimport './shop.css';\n\nconst Shop = () => {\n    const [products, setProducts] = useState([]);\n    const [cart, setCart] = useState([]);\n    useEffect(() => {\n        fetch('./products.JSON')\n            .then(res => res.json())\n            .then(data => setProducts(data));\n    }, []);\n    const addToCart = (product) => {\n        const newCart = [...cart, product]\n        setCart(newCart);\n    }\n    return (\n        <div className=\"\">\n            <p className=\"product-found\">Total Products Found: {products.length}</p>\n            <div className=\"shop-section\">\n                <div className=\"product-section\">\n\n                    {\n                        products.map(product => <Product\n                            key={product.key}\n                            product={product}\n                            addToCart={addToCart}\n                        ></Product>)\n                    }\n                </div>\n                <div className=\"cart-section\">\n                    <Cart cart={cart}></Cart>\n                </div>\n            </div>\n        </div>\n    );\n};\n\nexport default Shop;","import './App.css';\nimport Header from './components/Header/Header';\nimport Shop from './components/Shop/Shop';\n\nfunction App() {\n  return (\n    <div className=\"App\">\n      <Header></Header>\n      <Shop></Shop>\n    </div>\n  );\n}\n\nexport default App;\n","const reportWebVitals = onPerfEntry => {\n  if (onPerfEntry && onPerfEntry instanceof Function) {\n    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n      getCLS(onPerfEntry);\n      getFID(onPerfEntry);\n      getFCP(onPerfEntry);\n      getLCP(onPerfEntry);\n      getTTFB(onPerfEntry);\n    });\n  }\n};\n\nexport default reportWebVitals;\n","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport './index.css';\nimport App from './App';\nimport reportWebVitals from './reportWebVitals';\n\nReactDOM.render(\n  <React.StrictMode>\n    <App />\n  </React.StrictMode>,\n  document.getElementById('root')\n);\n\n// If you want to start measuring performance in your app, pass a function\n// to log results (for example: reportWebVitals(console.log))\n// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals\nreportWebVitals();\n"],"sourceRoot":""}