components/stories.js

class CustomStories extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.shadowRoot.innerHTML = `
      <style>
        .stories-container {
          display: flex;
          gap: 0.75rem;
          padding: 1rem;
          overflow-x: auto;
          scrollbar-width: none;
        }
        .stories-container::-webkit-scrollbar {
          display: none;
        }
        .story {
          display: flex;
          flex-direction: column;
          align-items: center;
          flex-shrink: 0;
        }
        .story-avatar {
          width: 3.5rem;
          height: 3.5rem;
          border-radius: 9999px;
          padding: 0.125rem;
          background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
        }
        .story-avatar-inner {
          width: 100%;
          height: 100%;
          border-radius: 9999px;
          border: 2px solid white;
          overflow: hidden;
        }
        .story-avatar-inner img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .story-username {
          margin-top: 0.25rem;
          font-size: 0.75rem;
          text-align: center;
        }
        .add-story {
          position: relative;
          width: 3.5rem;
          height: 3.5rem;
          border-radius: 9999px;
          background: #f1f5f9;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .add-story-icon {
          position: absolute;
          bottom: 0;
          right: 0;
          width: 1.25rem;
          height: 1.25rem;
          background: #3b82f6;
          border-radius: 9999px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: white;
        }
      </style>
      <div class="stories-container">
        <div class="story">
          <div class="add-story">
            <img src="http://static.photos/people/200x200/1" width="100%" height="100%" style="border-radius: 9999px;">
            <div class="add-story-icon">
              <i data-feather="plus" width="12" height="12"></i>
            </div>
          </div>
          <span class="story-username">Your Story</span>
        </div>
        ${[1,2,3,4,5].map(i => `
          <div class="story">
            <div class="story-avatar">
              <div class="story-avatar-inner">
                <img src="http://static.photos/people/200x200/${i+10}">
              </div>
            </div>
            <span class="story-username">user${i}</span>
          </div>
        `).join('')}
      </div>
    `;
    
    // Initialize Feather icons
    setTimeout(() => {
      if (typeof feather !== 'undefined') {
        feather.replace({ shadowRoot: this.shadowRoot });
      }
    }, 100);
  }
}

customElements.define('custom-stories', CustomStories);