feature/book-card (#3)

Co-authored-by: Tim Rijkse <trijkse@gmail.com>
Reviewed-on: #3

js/components/add-to-cart-button.js

@@ -0,0 +1,77 @@
+/**
+ * Add to Cart Button Component
+ * Button with plus icon and shopping bag icon
+ */
+import { plusIcon } from "../icons/plus.js";
+import { shoppingBagIcon } from "../icons/shopping-bag.js";
+
+class AddToCartButton extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setupEventListeners();
+  }
+
+  setupEventListeners() {
+    const button = this.shadowRoot.querySelector(".add-to-cart-button");
+    if (button) {
+      button.addEventListener("click", () => {
+        this.dispatchEvent(
+          new CustomEvent("add-to-cart", {
+            bubbles: true,
+            composed: true,
+          })
+        );
+      });
+    }
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        .add-to-cart-button {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: var(--spacing-xs, 0.25rem);
+          width: 70px;
+          height: 40px;
+          padding: 0;
+          background-color: var(--color-button-primary, #951d51);
+          border: none;
+          border-radius: var(--radius-sm, 0.25rem);
+          cursor: pointer;
+          transition: opacity var(--transition-fast, 150ms ease);
+        }
+
+        .add-to-cart-button:hover {
+          opacity: 0.9;
+        }
+
+        .add-to-cart-button:active {
+          opacity: 0.8;
+        }
+
+        .add-to-cart-button svg {
+          width: 24px;
+          height: 24px;
+          color: var(--color-text-inverse, #ffffff);
+        }
+      </style>
+      <button class="add-to-cart-button" type="button">
+        ${plusIcon({ size: 16, color: "#ffffff" })}
+        ${shoppingBagIcon({ size: 16, color: "#ffffff" })}
+      </button>
+    `;
+  }
+}
+
+customElements.define("add-to-cart-button", AddToCartButton);