fix: add modal

js/components/book-reviews.js

@@ -0,0 +1,47 @@
+/**
+ * Book Reviews Component
+ * Displays customer reviews for a book
+ */
+class BookReviews extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .reviews-container {
+          display: flex;
+          flex-direction: column;
+          gap: var(--spacing-lg, 1.5rem);
+        }
+
+        .no-reviews {
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: 16px;
+          font-weight: 400;
+          line-height: 24px;
+          color: var(--color-text-light, #64748b);
+          text-align: center;
+          padding: var(--spacing-xl, 2rem);
+        }
+      </style>
+      <div class="reviews-container">
+        <slot>
+          <p class="no-reviews">Nog geen recensies. Wees de eerste om een recensie te schrijven!</p>
+        </slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("book-reviews", BookReviews);