Maquetación y estilos del formulario de checkout

Checkout.jsx

import React from 'react';
import '../styles/components/Checkout.css';

const Checkout = () => {
  return (
    <div className="Checkout">
      <div className="Checkout-content">
        <h3>Lista de Pedidos:</h3>
        <div className="Checkout-item">
          <div className="Checkout-element">
            <h4>ITEM name</h4>
            <span>$10</span>
          </div>
          <button type="button">Eliminar</button>
        </div>
      </div>
      <div className="Checkout-sidebar">
        <h3>Precio Total: $10</h3>
        <button type="button">Continuar pedido</button>
      </div>
    </div>
  );
};

export default Checkout;

Gran curso! Decidí realizarlo con TS completamente y es genial!

Hola, les dejo el avance de mi proyecto, hecho en Nextjs con Styled Components:

https://github.com/danyel117/platzi-conf-store

Commit clase 24.

Dejo el código del profesor algo mas semántico, me da ansiedad muchos div jeje

export default function Checkout() {
  return (
    <main className="Checkout">
      <section className='Checkout-content'>
        <h3>Lista de Pedidos</h3>
        <article className="Checkout-item">
          <details className='Checkout-element'>
            <h4>ITEM NAME</h4>
            <span>$10</span>
          </details>
          <button type='button'>Delete</button>
        </article>
      </section>
      <aside className='Checkout-sidebar'>
        <h3>Precio Total: $10</h3>
        <button type='button'>Continue</button>
      </aside>
    </main>
  )
}

Ibamos bien hasta que empezó otra vez con “elemento”, “elementos”, “elemento”…, noooooooo, jajajaj

Excelente!

Checkout utilizando BEM

.Checkout {
  grid-template-columns: 3fr 1fr;
  grid-gap: 2rem;
  grid-row-gap: 1.5em;
  display: grid;
  padding: 0 0 4em 0;
}
.Checkout__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 0 0;
}
.Checkout__item .fas {
  margin: 0 0 0 10px;
  color: rgba(0,0,0,0.4);
  cursor: pointer;
}
.Checkout__item button {
  background-color: transparent;
  border: none;
  outline: none;
}
.Checkout__element {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.Checkout__element h4 {
  margin: 0;
}

.Checkout__sidebar button {
  box-shadow: inset 0px 1px 0px 0px #bee2f9;
    background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
    background-color: #63b8ee;
    border-radius: 6px;
    border: 1px solid #3866a3;
    display: inline-block;
    cursor: pointer;
    color: #14396a;
    font-family: Arial;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #7cacde;
    width: 100%;
    display: block;
    outline: none;
}

a {
  text-decoration: none;
}

Checkout.css

.Checkout {
  grid-template-columns: 3fr 1fr;
  grid-gap: 2rem;
  grid-row-gap: 1.5em;
  display: grid;
  padding: 0 0 4em 0;
}
.Checkout-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0 0 0;
}
.Checkout-item .fas {
  margin: 0 0 0 10px;
  color: rgba(0,0,0,0.4);
  cursor: pointer;
}
.Checkout-item button {
  background-color: transparent;
  border: none;
  outline: none;
}
.Checkout-element {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.Checkout-element h4 {
  margin: 0;
}

.Checkout-sidebar button {
  box-shadow: inset 0px 1px 0px 0px #bee2f9;
  background: linear-gradient(to bottom, #63b8ee 5%, #468ccf 100%);
  background-color: #63b8ee;
  border-radius: 6px;
  border: 1px solid #3866a3;
  display: inline-block;
  cursor: pointer;
  color: #14396a;
  font-family: Arial;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #7cacde;
  width: 100%;
  display: block;
  outline: none;
}

a {
  text-decoration: none;
}

w