feature/book-card (#3)

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

js/components/section-title.js

@@ -0,0 +1,75 @@
+/**
+ * Section Title Component
+ * Displays a title with an arrow right icon on the right side
+ */
+import { arrowRightIcon } from "../icons/arrow-right.js";
+
+class SectionTitle extends HTMLElement {
+  static get observedAttributes() {
+    return ["text"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot) {
+      this.render();
+    }
+  }
+
+  get text() {
+    return this.getAttribute("text") || this.textContent || "Section Title";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+        }
+
+        .section-title {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: var(--spacing-lg, 1.5rem) 0;
+        }
+
+        .title-text {
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: var(--font-size-2xl, 1.5rem);
+          font-weight: var(--font-weight-normal, 400);
+          line-height: var(--line-height-24, 24px);
+          color: var(--color-text, #1e293b);
+          margin: 0;
+        }
+
+        .icon-wrapper {
+          display: flex;
+          align-items: center;
+          color: var(--color-text, #1e293b);
+        }
+
+        .icon-wrapper svg {
+          width: 24px;
+          height: 24px;
+        }
+      </style>
+      <div class="section-title">
+        <h2 class="title-text">${this.text}</h2>
+        <div class="icon-wrapper">
+          ${arrowRightIcon({ size: 24, color: "currentColor" })}
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define("section-title", SectionTitle);