Progress Bar Component

3 files changed, 60 insertions, 24 deletions

diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
new file mode 100644
index 00000000..cdb55205
--- /dev/null
+++ b/src/components/ProgressBar.js
@@ -0,0 +1,26 @@
+import { CheckIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon } from "@heroicons/react/24/solid";
+
+const ProgressBar = ({ current, labels }) => {
+  return (
+    <div className="bg-gray_r-1 flex gap-x-2 p-4 rounded-md">
+      {labels.map((label, index) => (
+        <>
+          <div className={"flex gap-x-2 items-center " + (index < current ? 'text-gray_r-12' : 'text-gray_r-11')} key={index}>
+            <div className={"leading-none p-2 rounded-full w-7 text-center text-caption-2 " + (index < current ? 'bg-yellow_r-9' : 'bg-gray_r-6')}>
+              { index + 1 }
+            </div>
+            <p className="font-medium text-caption-2">{ label }</p>
+          </div>
+          { index < (labels.length - 1) && (
+            <div className="flex-1 flex items-center">
+              <div className="h-0.5 w-full bg-gray_r-7"></div>
+            </div>
+          ) }
+        </>
+      ))}
+    </div>
+  )
+}
+
+export default ProgressBar;
\ No newline at end of file
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js
index 452289b4..5a228077 100644
--- a/src/pages/shop/cart.js
+++ b/src/pages/shop/cart.js
@@ -6,6 +6,7 @@ import {
   MinusIcon,
 } from "@heroicons/react/24/solid";
 import { ExclamationTriangleIcon } from "@heroicons/react/24/outline";
+import { useRouter } from "next/router";
 
 // Helpers
 import { 
@@ -25,8 +26,10 @@ import Link from "../../components/Link";
 import Alert from "../../components/Alert";
 import Spinner from "../../components/Spinner";
 import AppBar from "../../components/AppBar";
+import ProgressBar from "../../components/ProgressBar";
 
 export default function Cart() {
+  const router = useRouter();
   const [isLoadingProducts, setIsLoadingProducts] = useState(true);
   const [products, setProducts] = useState([]);
   const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0);
@@ -158,28 +161,12 @@ export default function Cart() {
       <Layout>
         <AppBar title="Keranjang Saya" />
 
-        {/* jsx-start: Progress Bar */}
-        <div className="bg-gray_r-3 flex gap-x-2 p-4 rounded-md mb-3">
-          <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 text-caption-2">1</div>
-            <p className="font-medium text-gray_r-12 text-caption-2">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-6 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">2</div>
-            <p className="font-medium text-gray_r-11 text-caption-2">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-6 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">3</div>
-            <p className="font-medium text-gray_r-11 text-caption-2">Selesai</p>
-          </div>
-        </div>
-        {/* [End] Progress Bar */}
+        <ProgressBar 
+          current={1}
+          labels={['Keranjang', 'Pembayaran', 'Selesai']}
+        />
+
+        <hr className="h-1.5 bg-gray_r-3 border-none"/>
 
         {/* --- Start Alert */}
         {!isLoadingProducts && (
@@ -204,9 +191,11 @@ export default function Cart() {
           </div>
         )}
 
+        <hr className="h-1.5 bg-gray_r-3 border-none"/>
+
         <div className="p-4">
           {/* [Start] Product List */}
-          <div className="flex flex-col gap-y-6 mb-8">
+          <div className="flex flex-col gap-y-6">
           {products.map((product, index) => (
             <div className="flex gap-x-3" key={index}>
               <div className="w-4/12 flex items-center gap-x-2">
@@ -271,7 +260,11 @@ export default function Cart() {
           ))}
           </div>
           {/* [End] Product List */}
+        </div>
 
+        <hr className="h-1.5 bg-gray_r-3 border-none"/>
+
+        <div className="p-4">
           {/* [Start] Review Order */}
           {products.length > 0 ? (
             <div className="p-4 border border-gray_r-6 rounded-md mb-4">
@@ -321,13 +314,13 @@ export default function Cart() {
               <button 
                 className="flex-1 btn-yellow"
                 disabled={getProductsToProcess().length == 0}
+                onClick={() => router.push('/shop/checkout')}
               >
                 Checkout {getProductsToProcess().length > 0 ? `(${getProductsToProcess().length})` : ''}
               </button>
             </div>
           ) : ''}
           {/* [End] Submit Button */}
-
         </div>
       </Layout>
     </>
diff --git a/src/pages/shop/checkout.js b/src/pages/shop/checkout.js
new file mode 100644
index 00000000..48cbc10e
--- /dev/null
+++ b/src/pages/shop/checkout.js
@@ -0,0 +1,17 @@
+import AppBar from "../../components/AppBar";
+import Layout from "../../components/Layout";
+import ProgressBar from "../../components/ProgressBar";
+
+
+export default function Checkout() {
+  return (
+    <Layout>
+      <AppBar title="Checkout" />
+
+      <ProgressBar 
+        current={2}
+        labels={['Keranjang', 'Pembayaran', 'Selesai']}
+      />
+    </Layout>
+  )
+}
\ No newline at end of file