From 7a0a6f3081c9279c8eb678247f9e1d18bbf3450e Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 17 Dec 2022 11:51:31 +0700 Subject: Cart header style --- src/components/Alert.js | 3 ++ src/pages/shop/cart.js | 86 ++++++++++++++++++++++++++++++++++++------------- 2 files changed, 67 insertions(+), 22 deletions(-) (limited to 'src') diff --git a/src/components/Alert.js b/src/components/Alert.js index 68fb84b1..64268e05 100644 --- a/src/components/Alert.js +++ b/src/components/Alert.js @@ -7,6 +7,9 @@ const Alert = ({ children, className, type }) => { case 'success': typeClass = ' bg-green-100 text-green-900 ' break; + case 'warning': + typeClass = ' bg-yellow-100 text-yellow-900 ' + break; } return (
{children}
diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js index 9958a7bb..818629b8 100644 --- a/src/pages/shop/cart.js +++ b/src/pages/shop/cart.js @@ -1,20 +1,41 @@ import { useEffect, useState } from "react"; -import Header from "../../components/Header"; -import Layout from "../../components/Layout"; -import Link from "../../components/Link"; -import { createOrUpdateItemCart, deleteItemCart, getCart } from "../../helpers/cart"; -import ChevronLeftIcon from "../../icons/chevron-left.svg"; -import MinusIcon from "../../icons/minus.svg"; -import PlusIcon from "../../icons/plus.svg"; -import TrashIcon from "../../icons/trash.svg"; +import { toast } from "react-hot-toast"; +import Head from "next/head"; +import { + TrashIcon, + PlusIcon, + MinusIcon, + ChevronLeftIcon, +} from "@heroicons/react/24/solid"; +import { + ExclamationTriangleIcon, + HeartIcon, + HomeIcon +} from "@heroicons/react/24/outline"; + +// Helpers +import { + createOrUpdateItemCart, + deleteItemCart, + getCart +} from "../../helpers/cart"; +import { createSlug } from "../../helpers/slug"; import apiOdoo from "../../helpers/apiOdoo"; import currencyFormat from "../../helpers/currencyFormat"; -import { createSlug } from "../../helpers/slug"; + +// Components import ConfirmAlert from "../../components/ConfirmAlert"; -import { toast } from "react-hot-toast"; import Image from "../../components/Image"; +import Layout from "../../components/Layout"; +import Link from "../../components/Link"; +import Alert from "../../components/Alert"; + +export async function getServerSideProps(context) { + const previousRoute = context.req.headers.referer || '/'; + return { props: { previousRoute } }; +} -export default function Cart() { +export default function Cart({ previousRoute }) { const [products, setProducts] = useState([]); const [totalPriceBeforeTax, setTotalPriceBeforeTax] = useState(0); const [totalTaxAmount, setTotalTaxAmount] = useState(0); @@ -134,8 +155,27 @@ export default function Cart() { onClose={hideDeleteConfirmation} onSubmit={deleteItem} /> -
+ + Keranjang Belanja - Indoteknik + +
+ {/* --- Start Title */} + + +

Keranjang Saya

+ + {/* --- End Title */} + + {/* --- Start Icons */} +
+ + + + +
+ {/* --- End Icons */} +
{/* jsx-start: Progress Bar */}
@@ -159,15 +199,17 @@ export default function Cart() {
{/* [End] Progress Bar */} -
- {/* [Start] Title */} - - -

Keranjang Saya

- - {/* [End] Title */} + {/* --- Start Alert */} + + + + Mohon dicek kembali & pastikan pesanan kamu sudah sesuai dengan yang kamu butuhkan. Atau bisa hubungi kami. + + + {/* ---- End Alert */} +
{/* [Start] Product List */}
{products.map((product, index) => ( @@ -208,14 +250,14 @@ export default function Cart() { className="btn-red p-2 rounded" onClick={() => showDeleteConfirmation(product.id)} > - +
-- cgit v1.2.3