diff options
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/shop/cart.js | 41 | ||||
| -rw-r--r-- | src/pages/shop/checkout.js | 17 |
2 files changed, 34 insertions, 24 deletions
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 |