milinda-pitch/js/components/book-card.js

/**
 * Book Card Component
 * Reusable card displaying book thumbnail, title, author, and price
 */
class BookCard extends HTMLElement {
  static get observedAttributes() {
    return ['title', 'author', 'price', 'image', 'href', 'rating'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.render();
  }

  attributeChangedCallback() {
    if (this.shadowRoot) {
      this.render();
    }
  }

  get title() {
    return this.getAttribute('title') || 'Book Title';
  }

  get author() {
    return this.getAttribute('author') || 'Author Name';
  }

  get price() {
    return this.getAttribute('price') || '$0.00';
  }

  get image() {
    return this.getAttribute('image') || '';
  }

  get href() {
    return this.getAttribute('href') || 'book.html';
  }

  get rating() {
    return parseFloat(this.getAttribute('rating')) || 0;
  }

  renderStars(rating) {
    const fullStars = Math.floor(rating);
    const hasHalf = rating % 1 >= 0.5;
    const emptyStars = 5 - fullStars - (hasHalf ? 1 : 0);
    
    let stars = '';
    
    // Full stars
    for (let i = 0; i < fullStars; i++) {
      stars += `<svg class="star star-full" viewBox="0 0 24 24" fill="currentColor">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
      </svg>`;
    }
    
    // Half star
    if (hasHalf) {
      stars += `<svg class="star star-half" viewBox="0 0 24 24">
        <defs>
          <linearGradient id="halfGrad">
            <stop offset="50%" stop-color="currentColor"/>
            <stop offset="50%" stop-color="transparent"/>
          </linearGradient>
        </defs>
        <path fill="url(#halfGrad)" stroke="currentColor" stroke-width="1" d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
      </svg>`;
    }
    
    // Empty stars
    for (let i = 0; i < emptyStars; i++) {
      stars += `<svg class="star star-empty" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
      </svg>`;
    }
    
    return stars;
  }

  render() {
    // Generate placeholder image if none provided
    const imageHtml = this.image 
      ? `<img src="${this.image}" alt="${this.title}" class="book-image">`
      : `<div class="book-image placeholder">
           <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" 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>
         </div>`;

    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }

        .card {
          display: block;
          text-decoration: none;
          color: inherit;
          background-color: var(--color-background, #ffffff);
          border-radius: var(--radius-lg, 0.75rem);
          overflow: hidden;
          transition: transform var(--transition-fast, 150ms ease), 
                      box-shadow var(--transition-fast, 150ms ease);
        }

        .card:hover {
          transform: translateY(-2px);
          box-shadow: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
        }

        .card:active {
          transform: translateY(0);
        }

        .image-container {
          position: relative;
          aspect-ratio: 3 / 4;
          background-color: var(--color-background-tertiary, #f1f5f9);
          overflow: hidden;
        }

        .book-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .book-image.placeholder {
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--color-text-light, #64748b);
        }

        .book-image.placeholder svg {
          width: 48px;
          height: 48px;
          opacity: 0.5;
        }

        .content {
          padding: var(--spacing-sm, 0.5rem);
        }

        .title {
          font-size: var(--font-size-sm, 0.875rem);
          font-weight: var(--font-weight-semibold, 600);
          color: var(--color-text, #1e293b);
          margin-bottom: var(--spacing-xs, 0.25rem);
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: var(--line-height-tight, 1.25);
        }

        .author {
          font-size: var(--font-size-xs, 0.75rem);
          color: var(--color-text-light, #64748b);
          margin-bottom: var(--spacing-xs, 0.25rem);
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .rating {
          display: flex;
          align-items: center;
          gap: 2px;
          margin-bottom: var(--spacing-xs, 0.25rem);
        }

        .star {
          width: 12px;
          height: 12px;
          color: var(--color-accent, #f59e0b);
        }

        .star-empty {
          color: var(--color-border, #e2e8f0);
        }

        .price {
          font-size: var(--font-size-base, 1rem);
          font-weight: var(--font-weight-bold, 700);
          color: var(--color-primary, #2563eb);
        }
      </style>
      <a href="${this.href}" class="card">
        <div class="image-container">
          ${imageHtml}
        </div>
        <div class="content">
          <h3 class="title">${this.title}</h3>
          <p class="author">${this.author}</p>
          ${this.rating > 0 ? `<div class="rating">${this.renderStars(this.rating)}</div>` : ''}
          <p class="price">${this.price}</p>
        </div>
      </a>
    `;
  }
}

customElements.define('book-card', BookCard);