Untitled

function Cart () {  
  return (
    <Layout>
      <Head>
        <title>UA | Bag</title>
      </Head>

      <section className={styles.cart}>
        {cartList.length === 0 ? (
          <div className={styles.cartEmpty}>
            <i className="fa-sharp fa-solid fa-ghost"></i>
            <h1>Nothing in here</h1>
            <Link href="/shop">
              <button className={utils.buttonSecondary}>
                Continue Shopping
              </button>
            </Link>
          </div>
        ) : (
          <div className={styles.cartPanel}>
            <div className={styles.cartList}>
              {cartList.map((cartItem: ICartItem) => (
                <CartItem
                  item={cartItem}
                  uid={user._id}
                  pid={cartItem.item._id}
                  removeCb={removeCartItem}
                />
              ))}
            </div>
            <div className={styles.checkoutPanel}>
              <div className={styles.bill}>
                <div className={styles.billItem}>
                  <p>Base Price</p>
                  <p>$19,000</p>
                </div>
                <div className={styles.billItem}>
                  <p>Delivery</p>
                  <p>$10</p>
                </div>
                <div className={styles.billItem}>
                  <p>Total</p>
                  <p>$19,010</p>
                </div>                
              </div>
              <button className={utils.buttonSecondary}>Checkout</button>
            </div>
          </div>
        )}
      </section>
    </Layout>
  );
}

// SCSS
.checkoutPanel {
      background-color: var(--neutral-white);
      max-height: 10em;
      display: grid;
      grid-template-rows: 1fr auto;

      .bill {
        padding: 0.6em;
        display: flex;
        flex-flow: column;
        gap: 0.4em;

        .billItem {
          display: grid;
          grid-template-columns: 1fr auto;
        
          &:last-child {
            justify-self: flex-end;
          }
        }
        p:nth-child(even) {
          text-align: right;
        }
    }
}
Editor is loading...