feature/book-page (#4)

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

js/icons/arrow-circle-right-icon.js

@@ -0,0 +1,66 @@
+/**
+ * Arrow Circle Right Icon Web Component
+ * A circular arrow pointing right
+ */
+class ArrowCircleRightIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get size() {
+    return this.getAttribute("size") || "24";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "currentColor";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "2";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        svg {
+          display: block;
+        }
+      </style>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="${this.size}"
+        height="${this.size}"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="${this.color}"
+        stroke-width="${this.strokeWidth}"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <circle cx="12" cy="12" r="10"></circle>
+        <path d="m12 16 4-4-4-4"></path>
+        <path d="M8 12h8"></path>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("arrow-circle-right-icon", ArrowCircleRightIcon);

js/icons/book-open-icon.js

@@ -0,0 +1,64 @@
+/**
+ * Book Open Icon Web Component
+ * An open book icon
+ */
+class BookOpenIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get size() {
+    return this.getAttribute("size") || "48";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "currentColor";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "1";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        svg {
+          display: block;
+        }
+      </style>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="${this.size}"
+        height="${this.size}"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="${this.color}"
+        stroke-width="${this.strokeWidth}"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"></path>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("book-open-icon", BookOpenIcon);

js/icons/cart-icon.js

@@ -0,0 +1,31 @@
+/**
+ * Cart Icon (Lucide style shopping cart)
+ * @param {Object} props - Icon properties
+ * @param {number} props.size - Icon size (default: 20)
+ * @param {string} props.color - Icon color (default: currentColor)
+ * @param {number} props.strokeWidth - Stroke width (default: 2)
+ * @returns {string} SVG string
+ */
+export function cartIcon({
+  size = 20,
+  color = "currentColor",
+  strokeWidth = 2,
+} = {}) {
+  return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="${color}"
+      stroke-width="${strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="8" cy="21" r="1"/>
+      <circle cx="19" cy="21" r="1"/>
+      <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/>
+    </svg>
+  `;
+}

js/icons/chevron-down-icon.js

@@ -0,0 +1,64 @@
+/**
+ * Chevron Down Icon Web Component
+ * A downward pointing chevron
+ */
+class ChevronDownIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get size() {
+    return this.getAttribute("size") || "24";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "currentColor";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "2";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        svg {
+          display: block;
+        }
+      </style>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="${this.size}"
+        height="${this.size}"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="${this.color}"
+        stroke-width="${this.strokeWidth}"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <polyline points="6 9 12 15 18 9"></polyline>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("chevron-down-icon", ChevronDownIcon);

js/icons/clipboard-icon.js

@@ -0,0 +1,64 @@
+/**
+ * Clipboard Icon Web Component
+ * A clipboard/document icon
+ */
+class ClipboardIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get size() {
+    return this.getAttribute("size") || "32";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "currentColor";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "1";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        svg {
+          display: block;
+        }
+      </style>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="${this.size}"
+        height="${this.size}"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="${this.color}"
+        stroke-width="${this.strokeWidth}"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25ZM6.75 12h.008v.008H6.75V12Zm0 3h.008v.008H6.75V15Zm0 3h.008v.008H6.75V18Z"></path>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("clipboard-icon", ClipboardIcon);

js/icons/ebook-icon.js

@@ -0,0 +1,29 @@
+/**
+ * eBook Icon (Open book style)
+ * @param {Object} props - Icon properties
+ * @param {number} props.size - Icon size (default: 20)
+ * @param {string} props.color - Icon color (default: currentColor)
+ * @param {number} props.strokeWidth - Stroke width (default: 2)
+ * @returns {string} SVG string
+ */
+export function ebookIcon({
+  size = 20,
+  color = "currentColor",
+  strokeWidth = 2,
+} = {}) {
+  return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="${color}"
+      stroke-width="${strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M12 6.042A8.967 8.967 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0 0 18 18a8.967 8.967 0 0 0-6 2.292m0-14.25v14.25"/>
+    </svg>
+  `;
+}

js/icons/index.js

@@ -2,9 +2,16 @@
  * Lucide Icons Index
  * Re-exports all icons for easy importing
  */
+
+// Icon functions (return SVG strings)
 export { micIcon } from "./mic.js";
 export { searchIcon } from "./search.js";
 export { menuIcon } from "./menu.js";
 export { userIcon } from "./user.js";
 export { shoppingBagIcon } from "./shopping-bag.js";
 export { sendIcon } from "./send-icon.js";
+
+// Icon web components
+import "./menu-icon.js";
+import "./user-icon.js";
+import "./shopping-bag-icon.js";

js/icons/menu-icon.js

@@ -0,0 +1,66 @@
+/**
+ * Menu Icon Web Component
+ * A reusable menu/hamburger icon element
+ */
+class MenuIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get size() {
+    return this.getAttribute("size") || "32";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "#ffffff";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "2";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        svg {
+          display: block;
+        }
+      </style>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="${this.size}"
+        height="${this.size}"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="${this.color}"
+        stroke-width="${this.strokeWidth}"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <line x1="4" x2="20" y1="12" y2="12"></line>
+        <line x1="4" x2="20" y1="6" y2="6"></line>
+        <line x1="4" x2="20" y1="18" y2="18"></line>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("menu-icon", MenuIcon);

js/icons/review-icon.js

@@ -0,0 +1,31 @@
+/**
+ * Review Icon (person with star)
+ * @param {Object} props - Icon properties
+ * @param {number} props.size - Icon size (default: 24)
+ * @param {string} props.color - Icon color (default: currentColor)
+ * @param {number} props.strokeWidth - Stroke width (default: 2)
+ * @returns {string} SVG string
+ */
+export function reviewIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+} = {}) {
+  return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="${color}"
+      stroke-width="${strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <circle cx="9" cy="7" r="4"/>
+      <path d="M3 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2"/>
+      <polygon points="19 8 20.5 11 24 11.5 21.5 14 22 17.5 19 16 16 17.5 16.5 14 14 11.5 17.5 11 19 8"/>
+    </svg>
+  `;
+}

js/icons/shopping-bag-icon.js

@@ -0,0 +1,138 @@
+/**
+ * Shopping Bag Icon Web Component
+ * A reusable shopping bag/cart icon element with optional badge count
+ */
+class ShoppingBagIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width", "count"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.handleCartUpdate = this.handleCartUpdate.bind(this);
+  }
+
+  connectedCallback() {
+    this.render();
+    // Listen for cart updates
+    window.addEventListener("cart-updated", this.handleCartUpdate);
+    // Initialize count from cart store if available
+    this.initializeCount();
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener("cart-updated", this.handleCartUpdate);
+  }
+
+  initializeCount() {
+    // Wait for cart store to be available
+    setTimeout(() => {
+      if (window.cartStore) {
+        const count = window.cartStore.getItemCount();
+        if (count > 0) {
+          this.setAttribute("count", count.toString());
+        }
+      }
+    }, 0);
+  }
+
+  handleCartUpdate(event) {
+    const { count } = event.detail;
+    if (count > 0) {
+      this.setAttribute("count", count.toString());
+    } else {
+      this.removeAttribute("count");
+    }
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get size() {
+    return this.getAttribute("size") || "32";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "#ffffff";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "2";
+  }
+
+  get count() {
+    const countAttr = this.getAttribute("count");
+    return countAttr ? parseInt(countAttr, 10) : 0;
+  }
+
+  render() {
+    const showBadge = this.count > 0;
+    const displayCount = this.count > 99 ? "99+" : this.count.toString();
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          position: relative;
+        }
+        
+        .icon-wrapper {
+          position: relative;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        
+        svg {
+          display: block;
+        }
+        
+        .badge {
+          position: absolute;
+          top: -6px;
+          right: -8px;
+          min-width: 18px;
+          height: 18px;
+          padding: 0 5px;
+          color: var(--color-purple, #951d51);
+          background-color: #ffffff;
+          font-family: var(--font-family-outfit, "Outfit", sans-serif);
+          font-size: 11px;
+          font-weight: 700;
+          line-height: 18px;
+          text-align: center;
+          border-radius: 9px;
+          box-sizing: border-box;
+        }
+        
+        .badge.hidden {
+          display: none;
+        }
+      </style>
+      <div class="icon-wrapper">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="${this.size}"
+          height="${this.size}"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="${this.color}"
+          stroke-width="${this.strokeWidth}"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <circle cx="8" cy="21" r="1"></circle>
+          <circle cx="19" cy="21" r="1"></circle>
+          <path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path>
+        </svg>
+        <span class="badge ${showBadge ? "" : "hidden"}">${displayCount}</span>
+      </div>
+    `;
+  }
+}
+
+customElements.define("shopping-bag-icon", ShoppingBagIcon);

js/icons/user-icon.js

@@ -0,0 +1,66 @@
+/**
+ * User Icon Web Component
+ * A reusable user/profile icon element
+ */
+class UserIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ["size", "color", "stroke-width"];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  attributeChangedCallback() {
+    this.render();
+  }
+
+  get size() {
+    return this.getAttribute("size") || "32";
+  }
+
+  get color() {
+    return this.getAttribute("color") || "#ffffff";
+  }
+
+  get strokeWidth() {
+    return this.getAttribute("stroke-width") || "2";
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+        }
+        svg {
+          display: block;
+        }
+      </style>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="${this.size}"
+        height="${this.size}"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="${this.color}"
+        stroke-width="${this.strokeWidth}"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M18 20a6 6 0 0 0-12 0"></path>
+        <circle cx="12" cy="10" r="4"></circle>
+        <circle cx="12" cy="12" r="10"></circle>
+      </svg>
+    `;
+  }
+}
+
+customElements.define("user-icon", UserIcon);

js/icons/wishlist-icon.js

@@ -0,0 +1,32 @@
+/**
+ * Wishlist Icon (tablet with heart)
+ * @param {Object} props - Icon properties
+ * @param {number} props.size - Icon size (default: 24)
+ * @param {string} props.color - Icon color (default: currentColor)
+ * @param {number} props.strokeWidth - Stroke width (default: 2)
+ * @returns {string} SVG string
+ */
+export function wishlistIcon({
+  size = 24,
+  color = "currentColor",
+  strokeWidth = 2,
+} = {}) {
+  return `
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="${size}"
+      height="${size}"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="${color}"
+      stroke-width="${strokeWidth}"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <rect x="5" y="2" width="14" height="20" rx="2" ry="2"/>
+      <path d="M12 18h.01"/>
+      <path d="M12 8l1.5 1.5L12 11l-1.5-1.5L12 8z" fill="${color}" stroke="none"/>
+      <path d="M12 6.5c-.5-.5-1.5-.5-2 0s-.5 1.5 0 2l2 2 2-2c.5-.5.5-1.5 0-2s-1.5-.5-2 0"/>
+    </svg>
+  `;
+}