feature/site-header (#1)

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

js/components/arrow-button.js

@@ -0,0 +1,88 @@
+/**
+ * Arrow Button Component
+ * A CTA link with a circular arrow icon
+ * Uses a slot for the button text content
+ */
+class ArrowButton extends HTMLElement {
+  static get observedAttributes() {
+    return ["href"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get href() {
+    return this.getAttribute("href") || "#";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+        }
+
+        .arrow-button {
+          display: inline-flex;
+          align-items: center;
+          gap: 12px;
+          text-decoration: none;
+          color: inherit;
+          font-family: inherit;
+          font-size: inherit;
+          transition: opacity var(--transition-fast, 150ms ease);
+        }
+
+        .arrow-button:hover {
+          opacity: 0.8;
+        }
+
+        .arrow-icon {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 24px;
+          height: 24px;
+          border: 1.5px solid currentColor;
+          border-radius: 50%;
+          flex-shrink: 0;
+        }
+
+        .arrow-icon svg {
+          width: 12px;
+          height: 12px;
+          stroke: currentColor;
+          fill: none;
+        }
+
+        .button-text {
+          text-decoration: underline;
+          text-underline-offset: 3px;
+        }
+      </style>
+      <a class="arrow-button" href="${this.href}">
+        <span class="arrow-icon">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M5 12h14"></path>
+            <path d="m12 5 7 7-7 7"></path>
+          </svg>
+        </span>
+        <span class="button-text">
+          <slot></slot>
+        </span>
+      </a>
+    `;
+  }
+}
+
+customElements.define("arrow-button", ArrowButton);