Add to cart to localstorage

1 files changed, 51 insertions, 0 deletions

diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
new file mode 100644
index 00000000..2de1a7ac
--- /dev/null
+++ b/src/pages/shop/cart.js
@@ -0,0 +1,51 @@
+import { useEffect } from "react";
+import Header from "../../components/Header";
+import Layout from "../../components/Layout";
+import Link from "../../components/Link";
+import { getCart } from "../../helpers/cart";
+import ChevronLeftIcon from "../../icons/chevron-left.svg";
+
+export default function Cart() {
+  useEffect(() => {
+    console.log(getCart());
+  })
+  return (
+    <>
+      <Header title={`Keranjang Belanja - Indoteknik`}/>
+      <Layout>
+        <div className="p-4">
+          {/* Progress Bar */}
+          <div className="bg-gray_r-2 flex gap-x-2 p-4 rounded-md mb-4">
+            <div className="flex gap-x-2 items-center">
+              <div className="bg-yellow_r-9 leading-none p-2 rounded-full w-7 text-center text-gray_r-12">1</div>
+              <p className="font-medium">Keranjang</p>
+            </div>
+            <div className="flex-1 flex items-center">
+              <div className="h-0.5 w-full bg-gray_r-7"></div>
+            </div>
+            <div className="flex gap-x-2 items-center">
+              <div className="bg-gray_r-3 leading-none p-2 rounded-full w-7 text-center text-gray_r-11">2</div>
+              <p className="font-medium text-gray_r-11">Pembayaran</p>
+            </div>
+            <div className="flex-1 flex items-center">
+              <div className="h-0.5 w-full bg-gray_r-7"></div>
+            </div>
+            <div className="flex gap-x-2 items-center">
+              <div className="bg-gray_r-3 leading-none p-2 rounded-full w-7 text-center text-gray_r-11">3</div>
+              <p className="font-medium text-gray_r-11">Selesai</p>
+            </div>
+          </div>
+          {/* [End] Progress Bar */}
+          {/* Title */}
+          <div className="flex gap-x-2">
+            <Link href="/" className="pr-2">
+              <ChevronLeftIcon className="w-6 stroke-gray_r-12"/>
+            </Link>
+            <h1>Keranjang Saya</h1>
+          </div>
+          {/* [End] Title */}
+        </div>
+      </Layout>
+    </>
+  );
+}
\ No newline at end of file