prettier

1 files changed, 46 insertions, 38 deletions

diff --git a/src/lib/cart/components/Cart.jsx b/src/lib/cart/components/Cart.jsx
index 2d94ac0b..6a503c0a 100644
--- a/src/lib/cart/components/Cart.jsx
+++ b/src/lib/cart/components/Cart.jsx
@@ -103,7 +103,7 @@ const Cart = () => {
 
   const selectedProduct = () => {
     if (!products) return []
-    return products.filter((product) => product.selected == true)
+    return products?.filter((product) => product.selected == true)
   }
 
   const deleteProduct = (productId) => {
@@ -115,27 +115,35 @@ const Cart = () => {
   }
 
   return (
-    <div className='pt-6'>
+    <div className='pt-4'>
       <div className='flex justify-between mb-4 px-4'>
         <h1 className='font-semibold'>Daftar Produk Belanja</h1>
         <Link href='/'>Cari Produk Lain</Link>
       </div>
 
-      <div className='flex flex-col gap-y-4 px-4'>
+      <div className='flex flex-col gap-y-4 h-screen'>
         {cart.isLoading && (
           <div className='flex justify-center my-4'>
             <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
           </div>
         )}
 
-        {!cart.isLoading && !products && (
-          <Alert className='text-center my-2' type='info'>
-            Keranjang belanja anda masih kosong
-          </Alert>
+        {!cart.isLoading && (!products || products?.length == 0) && (
+          <div className='px-4'>
+            <Alert
+              className='text-center my-2'
+              type='info'
+            >
+              Keranjang belanja anda masih kosong
+            </Alert>
+          </div>
         )}
 
         {products?.map((product) => (
-          <div key={product?.id} className='flex'>
+          <div
+            key={product?.id}
+            className='flex mx-4'
+          >
             <button
               type='button'
               className='flex items-center mr-2'
@@ -154,7 +162,7 @@ const Cart = () => {
                 className='object-contain object-center border border-gray_r-6 h-40 w-full rounded-md'
               />
             </Link>
-            <div className='flex-1 px-2 text-caption-1'>
+            <div className='flex-1 px-2 text-caption-2'>
               <Link
                 href={createSlug('/shop/product/', product?.parent.name, product?.parent.id)}
                 className='line-clamp-2 leading-6 !text-gray_r-12 font-normal'
@@ -214,37 +222,37 @@ const Cart = () => {
             </div>
           </div>
         ))}
-      </div>
 
-      <div className='sticky bottom-0 left-0 w-full p-4 mt-6 border-t border-gray_r-6 bg-white'>
-        <div className='flex justify-between mb-4'>
-          <div className='text-gray_r-11'>
-            Total:
-            <span className='text-red_r-11 font-semibold'>
-              &nbsp;
-              {selectedProduct().length > 0
-                ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
-                : '-'}
-            </span>
+        <div className='sticky bottom-0 left-0 w-full p-4 mt-auto border-t border-gray_r-6 bg-white'>
+          <div className='flex justify-between mb-4'>
+            <div className='text-gray_r-11'>
+              Total:
+              <span className='text-red_r-11 font-semibold'>
+                &nbsp;
+                {selectedProduct().length > 0
+                  ? currencyFormat(totalPriceBeforeTax - totalDiscountAmount + totalTaxAmount)
+                  : '-'}
+              </span>
+            </div>
+          </div>
+          <div className='flex gap-x-3'>
+            <button
+              type='button'
+              className='btn-yellow flex-1'
+              disabled={selectedProduct().length == 0}
+              onClick={() => router.push('/shop/quotation')}
+            >
+              Quotation
+            </button>
+            <button
+              type='button'
+              className='btn-solid-red flex-1'
+              disabled={selectedProduct().length == 0}
+              onClick={() => router.push('/shop/checkout')}
+            >
+              Checkout
+            </button>
           </div>
-        </div>
-        <div className='flex gap-x-3'>
-          <button
-            type='button'
-            className='btn-yellow flex-1'
-            disabled={selectedProduct().length == 0}
-            onClick={() => router.push('/shop/quotation')}
-          >
-            Quotation
-          </button>
-          <button
-            type='button'
-            className='btn-solid-red flex-1'
-            disabled={selectedProduct().length == 0}
-            onClick={() => router.push('/shop/checkout')}
-          >
-            Checkout
-          </button>
         </div>
       </div>