Main

.gitignore

@@ -29,6 +29,9 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env
 
 # vercel
 .vercel
+
+note.txt

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "semi": false,
+  "doubleQuote": true
+}

components/Add.jsx

@@ -0,0 +1,140 @@
+import { useState } from "react"
+import styles from "../styles/Add.module.css"
+import axios from "axios"
+
+const Add = ({ setClose }) => {
+  const [file, setFile] = useState(null)
+  const [title, setTitle] = useState(null)
+  const [desc, setDesc] = useState(null)
+  const [prices, setPrices] = useState([])
+  const [extraOptions, setExtraOptions] = useState([])
+  const [extra, setExtra] = useState(null)
+
+  const changePrice = (e, index) => {
+    const currentPrices = prices
+    currentPrices[index] = e.target.value
+    setPrices(currentPrices)
+  }
+
+  const handleExtraInput = (e) => {
+    setExtra({ ...extra, [e.target.name]: e.target.value })
+  }
+
+  const handleExtra = (e) => {
+    setExtraOptions((prev) => [...prev, extra])
+  }
+
+  const handleCreate = async () => {
+    const data = new FormData()
+    data.append("file", file)
+    data.append("upload_preset", "uploads")
+    try {
+      const uploadRes = await axios.post(
+        "https://api.cloudinary.com/v1_1/dinwebdev/image/upload",
+        data
+      )
+
+      const { url } = uploadRes.data
+      const newProduct = {
+        title,
+        desc,
+        prices,
+        extraOptions,
+        img: url,
+      }
+
+      await axios.post("http://localhost:3000/api/products", newProduct)
+      setClose(true)
+    } catch (err) {
+      console.log(err)
+    }
+  }
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <span onClick={() => setClose(true)} className={styles.close}>
+          X
+        </span>
+        <h1>Add a new Pizza</h1>
+        <div className={styles.item}>
+          <label className={styles.label}>Choose an image</label>
+          <input type="file" onChange={(e) => setFile(e.target.files[0])} />
+        </div>
+        <div className={styles.item}>
+          <label className={styles.label}>Title</label>
+          <input
+            className={styles.input}
+            type="text"
+            onChange={(e) => setTitle(e.target.value)}
+          />
+        </div>
+        <div className={styles.item}>
+          <label className={styles.label}>Desc</label>
+          <textarea
+            rows={4}
+            type="text"
+            onChange={(e) => setDesc(e.target.value)}
+          />
+        </div>
+        <div className={styles.item}>
+          <label className={styles.label}>Prices</label>
+          <div className={styles.priceContainer}>
+            <input
+              className={`${styles.input} ${styles.inputSm}`}
+              type="number"
+              placeholder="Small"
+              onChange={(e) => changePrice(e, 0)}
+            />
+            <input
+              className={`${styles.input} ${styles.inputSm}`}
+              type="number"
+              placeholder="Medium"
+              onChange={(e) => changePrice(e, 1)}
+            />
+            <input
+              className={`${styles.input} ${styles.inputSm}`}
+              type="number"
+              placeholder="Large"
+              onChange={(e) => changePrice(e, 2)}
+            />
+          </div>
+        </div>
+        <div className={styles.item}>
+          <label className={styles.label}>Extra</label>
+          <div className={styles.extra}>
+            <input
+              className={`${styles.input} ${styles.inputSm}`}
+              type="text"
+              placeholder="Item"
+              name="text"
+              onChange={handleExtraInput}
+            />
+            <input
+              className={`${styles.input} ${styles.inputSm}`}
+              type="number"
+              placeholder="Price"
+              name="price"
+              onChange={handleExtraInput}
+            />
+            <button className={styles.extraButton} onClick={handleExtra}>
+              Add
+            </button>
+          </div>
+          <div className={styles.extraItems}>
+            {extraOptions.map((option) => (
+              <span key={option.text} className={styles.extraItem}>
+                {option.text}
+              </span>
+            ))}
+          </div>
+        </div>
+        <button className={styles.addButton} onClick={handleCreate}>
+          Create
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export default Add

components/AddButton.jsx

@@ -0,0 +1,11 @@
+import styles from "../styles/Add.module.css";
+
+const AddButton = ({ setClose }) => {
+  return (
+    <div onClick={() => setClose(false)} className={styles.mainAddButton}>
+      Add New Pizza
+    </div>
+  );
+};
+
+export default AddButton;

components/Featured.jsx

@@ -1,41 +1,52 @@
-import styles from "../styles/Featured.module.css";
-import Image from "next/image";
-import { useState } from "react";
+import styles from "../styles/Featured.module.css"
+import Image from "next/image"
+import { useState } from "react"
 
 const Featured = () => {
-  const [index, setIndex] = useState(0);
+  const [index, setIndex] = useState(0)
   const images = [
-    "/img/featured.png",
+    "/img/featured1.png",
     "/img/featured2.png",
     "/img/featured3.png",
-  ];
+  ]
 
-  const handleArrow = (direction) =>{
-      if(direction==="l"){
-          setIndex(index !== 0 ? index-1 : 2)
-      }
-      if(direction==="r"){
-          setIndex(index !== 2 ? index+1 : 0)
-      }
+  const handleArrow = (direction) => {
+    if (direction === "l") {
+      setIndex(index !== 0 ? index - 1 : 2)
+    }
+    if (direction === "r") {
+      setIndex(index !== 2 ? index + 1 : 0)
+    }
   }
 
   return (
     <div className={styles.container}>
-      <div className={styles.arrowContainer} style={{ left: 0 }} onClick={()=>handleArrow("l")}>
-        <Image src="/img/arrowl.png" alt="" layout="fill" objectFit="contain"/>
+      <div
+        className={styles.arrowContainer}
+        style={{ left: 0 }}
+        onClick={() => handleArrow("l")}
+      >
+        <Image src="/img/arrowl.png" alt="" layout="fill" objectFit="contain" />
       </div>
-      <div className={styles.wrapper} style={{transform:`translateX(${-100*index}vw)`}}>
+      <div
+        className={styles.wrapper}
+        style={{ transform: `translateX(${-100 * index}vw)` }}
+      >
         {images.map((img, i) => (
           <div className={styles.imgContainer} key={i}>
             <Image src={img} alt="" layout="fill" objectFit="contain" />
           </div>
         ))}
       </div>
-      <div className={styles.arrowContainer} style={{ right: 0 }} onClick={()=>handleArrow("r")}>
-        <Image src="/img/arrowr.png" layout="fill" alt="" objectFit="contain"/>
+      <div
+        className={styles.arrowContainer}
+        style={{ right: 0 }}
+        onClick={() => handleArrow("r")}
+      >
+        <Image src="/img/arrowr.png" layout="fill" alt="" objectFit="contain" />
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Featured;
+export default Featured

components/Footer.jsx

@@ -1,5 +1,5 @@
-import Image from "next/image";
-import styles from "../styles/Footer.module.css";
+import Image from "next/image"
+import styles from "../styles/Footer.module.css"
 
 const Footer = () => {
   return (
@@ -49,7 +49,7 @@ const Footer = () => {
         </div>
       </div>
     </div>
-  );
-};
+  )
+}
 
-export default Footer;
+export default Footer

components/Layout.js

@@ -1,3 +1,18 @@
+import Footer from "./Footer"
+import Navbar from "./Navbar"
+
+const Layout = ({ children }) => {
+  return (
+    <>
+      <Navbar />
+      {children}
+      <Footer />
+    </>
+  )
+}
+
+export default Layout
+/*
 import Footer from "./Footer";
 import Navbar from "./Navbar";
 
@@ -12,3 +27,4 @@ const Layout = ({ children }) => {
 };
 
 export default Layout;
+*/

components/Navbar.jsx

@@ -1,7 +1,11 @@
-import Image from "next/image";
-import styles from "../styles/Navbar.module.css";
+import Image from "next/image"
+import Link from "next/link"
+import styles from "../styles/Navbar.module.css"
+import { useSelector } from "react-redux"
 
 const Navbar = () => {
+  const quantity = useSelector((state) => state.cart.quantity)
+
   return (
     <div className={styles.container}>
       <div className={styles.item}>
@@ -15,23 +19,27 @@ const Navbar = () => {
       </div>
       <div className={styles.item}>
         <ul className={styles.list}>
-          <li className={styles.listItem}>Homepage</li>
+          <Link href={"/"} passHref>
+            <li className={styles.listItem}>Homepage</li>
+          </Link>
           <li className={styles.listItem}>Products</li>
           <li className={styles.listItem}>Menu</li>
-          <Image src="/img/logo.png" alt="" width="160px" height="69px" />
+          <Image src="/img/logo-dwd-2.png" alt="" width="160px" height="69px" />
           <li className={styles.listItem}>Events</li>
           <li className={styles.listItem}>Blog</li>
           <li className={styles.listItem}>Contact</li>
         </ul>
       </div>
-      <div className={styles.item}>
-        <div className={styles.cart}>
-          <Image src="/img/cart.png" alt="" width="30px" height="30px" />
-          <div className={styles.counter}>2</div>
+      <Link href={"/cart"} passHref>
+        <div className={styles.item}>
+          <div className={styles.cart}>
+            <Image src="/img/cart.png" alt="" width="30px" height="30px" />
+            <div className={styles.counter}>{quantity}</div>
+          </div>
         </div>
-      </div>
+      </Link>
     </div>
-  );
-};
+  )
+}
 
-export default Navbar;
+export default Navbar

components/OrderDetail.jsx

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import styles from "../styles/OrderDetail.module.css";
+
+const OrderDetail = ({ total, createOrder }) => {
+  const [customer, setCustomer] = useState("");
+  const [address, setAddress] = useState("");
+
+  const handleClick = () => {
+    createOrder({ customer, address, total, method: 0 });
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.wrapper}>
+        <h1 className={styles.title}>You will pay $12 after delivery.</h1>
+        <div className={styles.item}>
+          <label className={styles.label}>Name Surname</label>
+          <input
+            placeholder="John Doe"
+            type="text"
+            className={styles.input}
+            onChange={(e) => setCustomer(e.target.value)}
+          />
+        </div>
+        <div className={styles.item}>
+          <label className={styles.label}>Phone Number</label>
+          <input
+            type="text"
+            placeholder="+1 234 567 89"
+            className={styles.input}
+          />
+        </div>
+        <div className={styles.item}>
+          <label className={styles.label}>Address</label>
+          <textarea
+            rows={5}
+            placeholder="Elton St. 505 NY"
+            type="text"
+            className={styles.textarea}
+            onChange={(e) => setAddress(e.target.value)}
+          />
+        </div>
+        <button className={styles.button} onClick={handleClick}>
+          Order
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default OrderDetail;