first commit of starter project

lmac-1 · Feb 16, 2023 · a8e8af7 · a8e8af7
1 parent d63dc99
commit a8e8af7
Show file tree

Hide file tree

Showing 16 changed files with 1,708 additions and 584 deletions.
diff --git a/README.md b/README.md
@@ -1,38 +1,2 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+Resources used:
+- [Tabler icons](https://tabler-icons.io/) for shopping cart icon
diff --git a/components/CartItem.js b/components/CartItem.js
@@ -0,0 +1,18 @@
+import Image from "next/image";
+
+export default function CartItem({ item }) {
+  const { name, emoji, quantity, price } = item;
+
+  return (
+    <div className="flex items-center gap-4 mb-3">
+      <p className="text-4xl">{emoji}</p>
+      <div>
+        {name} <span className="text-xs">({quantity})</span>
+      </div>
+      <div className="ml-auto">{price}</div>
+      <button className="hover:bg-emerald-50 transition-colors rounded-full duration-500 p-1">
+        <Image alt="delete icon" src="./trash.svg" width={20} height={20} />
+      </button>
+    </div>
+  );
+}
diff --git a/components/Layout.js b/components/Layout.js
@@ -0,0 +1,22 @@
+import Head from "next/head";
+import NavBar from "./NavBar";
+
+export default function Layout({ children }) {
+  return (
+    <>
+      <Head>
+        <title>Basic Next.js ecommerce</title>
+        <meta
+          name="description"
+          content="A simple website to show how to use use-shopping-cart"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <NavBar />
+      <main className="bg-[#f8f7f5] min-h-[calc(100vh-76px)] px-10 py-8">
+        <div className="container md:mx-auto md:max-w-[850px]">{children}</div>
+      </main>
+    </>
+  );
+}
diff --git a/components/NavBar.js b/components/NavBar.js
@@ -0,0 +1,24 @@
+import Image from "next/image";
+import ShoppingCart from "./ShoppingCart";
+
+export default function NavBar() {
+  return (
+    <nav className="py-5 px-12 flex justify-between">
+      <p className="bg-white text-3xl font-bold underline underline-offset-4 decoration-wavy decoration-2 decoration-emerald-500">
+        fresh
+      </p>
+      <button className="relative">
+        <Image
+          src="./cart.svg"
+          width={40}
+          height={40}
+          alt="shopping cart icon"
+        />
+        <div className="rounded-full flex justify-center items-center bg-emerald-500 text-xs text-white absolute w-6 h-5 bottom-6 -right-1">
+          4
+        </div>
+      </button>
+      <ShoppingCart />
+    </nav>
+  );
+}
diff --git a/components/Product.js b/components/Product.js
@@ -0,0 +1,42 @@
+import { useState } from "react";
+
+export default function Product({ product }) {
+  const { name, price, emoji } = product;
+  const [quantity, setQuantity] = useState(1);
+
+  const decreaseQuantity = () => {
+    if (quantity > 1) {
+      setQuantity(quantity - 1);
+    }
+  };
+
+  const increaseQuantity = () => {
+    setQuantity(quantity + 1);
+  };
+
+  return (
+    <article className="flex flex-col gap-3 bg-white p-8 rounded-xl shadow-md text-center mb-6">
+      <div className="text-8xl cursor-default">{emoji}</div>
+      <div className="text-lg">{name}</div>
+      <div className="text-2xl font-semibold mt-auto">{price}</div>
+      <div className="flex justify-around items-center mt-4 mb-2 ">
+        <button
+          onClick={decreaseQuantity}
+          className="hover:text-emerald-500 hover:bg-emerald-50 w-8 h-8 rounded-full transition-colors duration-500"
+        >
+          -
+        </button>
+        <span className="w-10 text-center rounded-md mx-3">{quantity}</span>
+        <button
+          onClick={increaseQuantity}
+          className="hover:text-emerald-500 hover:bg-emerald-50 w-8 h-8 rounded-full transition-colors duration-500"
+        >
+          +
+        </button>
+      </div>
+      <button className="bg-emerald-50 hover:bg-emerald-500 hover:text-white transition-colors duration-500 text-emerald-500 rounded-md px-5 py-2">
+        Add to cart
+      </button>
+    </article>
+  );
+}
diff --git a/components/ShoppingCart.js b/components/ShoppingCart.js
@@ -0,0 +1,19 @@
+import CartItem from "./CartItem";
+
+const items = [
+  { id: 1, emoji: "🍉", quantity: 1, name: "Watermelon", price: "£1.00" },
+  { id: 2, emoji: "🍎", quantity: 3, name: "Apple", price: "£0.60" },
+];
+
+export default function ShoppingCart() {
+  return (
+    <div className="bg-white flex flex-col absolute right-3 md:right-9 top-14 w-80 py-4 px-4 shadow-[0_5px_15px_0_rgba(0,0,0,.15)] rounded-md">
+      {items.map((item) => (
+        <CartItem item={item} key={item.id} />
+      ))}
+      <button className="bg-emerald-50 mt-3 hover:bg-emerald-500 hover:text-white transition-colors duration-500 text-emerald-500 py-3 px-5 rounded-md w-100">
+        Proceed to checkout
+      </button>
+    </div>
+  );
+}