diff options
| -rw-r--r-- | src/components/ProgressBar.js | 26 | ||||
| -rw-r--r-- | src/pages/shop/cart.js | 41 | ||||
| -rw-r--r-- | src/pages/shop/checkout.js | 17 |
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 |