import { useState } from "react";

function Formulario() {
  const [favorito, setFavorito] = useState(false);

  return (
    <div>
      <div>
        <img
          src="https://picsum.photos/500/300"
          alt="Laptop Gamer"
        />

        <div>
          <h2>Laptop Gamer</h2>
          <p>
            Laptop con RTX 4060, 16GB RAM, ideal para gaming y desarrollo.
          </p>

          <h3>$1,299.99</h3>

          <div>
            <span>Disponible</span>
            <span>Envío gratis</span>
          </div>

          <div>
            <button
              onClick={() => setFavorito(!favorito)}
            >
              {favorito ? '❤️ En favoritos' : '🤍 Añadir a favoritos'}
            </button>
          </div>

          <div>
            <button>
              Comprar ahora
            </button>
            <button>
              Añadir al carrito
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Formulario;


---------------------------------------------
--con css boostrap

import { useState } from "react";

function Formulario() {
  const [favorito, setFavorito] = useState(false);

  return (
    <div className="container my-5">
      <div className="card shadow-sm" style={{ maxWidth: '500px', margin: '0 auto' }}>
        <img
          src="https://picsum.photos/400/300"
          className="card-img-top"
          // className="rounded-circle d-block mx-auto" width="150" height="150"
          alt="Laptop Gamer"
        />

        <div className="card-body text-center">
          <h2 className="card-title">Laptop Gamer</h2>
          <p className="card-text">
            Laptop con RTX 4060, 16GB RAM, ideal para gaming y desarrollo.
          </p>

          <h3 className="text-primary fw-bold mb-4">$1,299.99</h3>

          <div className="mb-3">
            <span className="badge bg-success me-2">Disponible</span>
            <span className="badge bg-warning">Envío gratis</span>
          </div>

          <div className="mb-4">
            <button
              className={`btn ${favorito ? 'btn-danger' : 'btn-outline-danger'} w-100`}
              onClick={() => setFavorito(!favorito)}
            >
              {favorito ? '❤️ En favoritos' : '🤍 Añadir a favoritos'}
            </button>
          </div>

          <div className="d-grid gap-2">
            <button className="btn btn-primary btn-lg">
              Comprar ahora
            </button>
            <button className="btn btn-outline-secondary">
              Añadir al carrito
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}

export default Formulario;