checkout

src/App.js

@@ -5,8 +5,6 @@ import { Shop } from "./pages/shop/shop";
 import { Contact } from "./pages/contact";
 import { Checkout } from "./pages/checkout"; 
 import { Cart } from "./pages/cart/cart";
-import {AddProduct} from "./pages/AddProduct"; 
-import {Signup} from "./pages/Signup"; 
 import { ShopContextProvider } from "./context/shop-context";
 
 function App() {
@@ -19,8 +17,6 @@ function App() {
             <Route path="/" element={<Shop />} />
             <Route path="/contact" element={<Contact />} />
             <Route path="/checkout" element={<Checkout />} />
-            <Route path="/add-product" element={<AddProduct />} />
-            <Route path="/signup" element={<Signup />} /> 
             <Route path="/cart" element={<Cart />} />
           </Routes>
         </Router>

src/components/navbar.js

@@ -13,8 +13,6 @@ export const Navbar = () => {
         <Link to="/cart">
           <ShoppingCart size={32} />
         </Link>
-        <Link to="/add-product"> Add Product </Link> 
-        <Link to="/signup"> Sign Up </Link> 
       </div>
     </div>
   );

src/firebaseConfig.js

-// firebaseConfig.js
-import { initializeApp } from "firebase/app";
-import { getAuth } from "firebase/auth";
-import { getFirestore } from "firebase/firestore";
-
-const firebaseConfig = {
-  apiKey: "AIzaSyA61BW4vGOjCkfvKK9azjjAFET7mF5lHy0",
-  authDomain: "protech-shop1.firebaseapp.com",
-  projectId: "protech-shop1",
-  storageBucket: "protech-shop1.appspot.com",
-  messagingSenderId: "154428282416",
-  appId: "1:154428282416:web:34373700850dfafcb87ff5"
-};
-
-const app = initializeApp(firebaseConfig);
-const auth = getAuth(app);
-const db = getFirestore(app);
-
-export { auth, db };

src/pages/AddProduct.js

-// src/pages/AddProduct.js
-import React, { useState } from "react";
-import { db } from "../firebaseConfig"; // 确保路径正确
-import { collection, addDoc } from "firebase/firestore";
-
-const AddProduct = () => {
-  const [productName, setProductName] = useState("");
-  const [price, setPrice] = useState("");
-
-  const handleAddProduct = async (e) => {
-    e.preventDefault();
-    try {
-      await addDoc(collection(db, "products"), {
-        productName,
-        price: parseFloat(price)
-      });
-      alert("Product added successfully!");
-    } catch (error) {
-      alert(error.message);
-    }
-  };
-
-  return (
-    <form onSubmit={handleAddProduct}>
-      <input
-        type="text"
-        placeholder="Product Name"
-        value={productName}
-        onChange={(e) => setProductName(e.target.value)}
-        required
-      />
-      <input
-        type="number"
-        placeholder="Price"
-        value={price}
-        onChange={(e) => setPrice(e.target.value)}
-        required
-      />
-      <button type="submit">Add Product</button>
-    </form>
-  );
-};
-
-export default AddProduct; 

src/pages/Signup.js

-// src/pages/Signup.js
-import React, { useState } from "react";
-import { auth } from "../firebaseConfig"; // 确保路径正确
-import { createUserWithEmailAndPassword } from "firebase/auth";
-
-const Signup = () => {
-  const [email, setEmail] = useState("");
-  const [password, setPassword] = useState("");
-
-  const handleSignup = async (e) => {
-    e.preventDefault();
-    try {
-      await createUserWithEmailAndPassword(auth, email, password);
-      alert("User signed up successfully!");
-    } catch (error) {
-      alert(error.message);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSignup}>
-      <input
-        type="email"
-        placeholder="Email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        required
-      />
-      <input
-        type="password"
-        placeholder="Password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-        required
-      />
-      <button type="submit">Sign Up</button>
-    </form>
-  );
-};
-
-export default Signup;

src/pages/shop/shop.js

-import React, { useEffect, useState } from "react";
-import { db } from "./firebaseConfig";
-import { collection, getDocs } from "firebase/firestore";
-
+import React from "react";
+import { PRODUCTS } from "../../products";
+import { Product } from "./product";
 import "./shop.css";
 
 export const Shop = () => {
-  const [products, setProducts] = useState([]);
-
-  useEffect(() => {
-    const fetchProducts = async () => {
-      const productsCollection = collection(db, "products");
-      const productSnapshot = await getDocs(productsCollection);
-      const productList = productSnapshot.docs.map(doc => ({
-        id: doc.id,
-        ...doc.data()
-      }));
-      setProducts(productList);
-    };
-
-    fetchProducts();
-  }, []);
-
   return (
     <div className="shop">
       <div className="shopTitle">
-        <h1>ProTech Shop</h1>
+        <h1>PedroTech Shop</h1>
       </div>
 
       <div className="products">
-        {products.map((product) => (
-          <div className="product" key={product.id}>
-            <p><b>{product.productName}</b></p>
-            <p>${product.price}</p>
-          </div>
+        {PRODUCTS.map((product) => (
+          <Product data={product} />
         ))}
       </div>
     </div>