Spaces:
Running
Running
| class CustomThreadCard extends HTMLElement { | |
| static get observedAttributes() { | |
| return ['title', 'author', 'date', 'comments', 'likes', 'tags', 'category']; | |
| } | |
| connectedCallback() { | |
| this.render(); | |
| } | |
| attributeChangedCallback() { | |
| this.render(); | |
| } | |
| render() { | |
| const title = this.getAttribute('title') || 'Untitled Thread'; | |
| const author = this.getAttribute('author') || 'Anonymous'; | |
| const date = this.getAttribute('date') || 'Just now'; | |
| const comments = this.getAttribute('comments') || '0'; | |
| const likes = this.getAttribute('likes') || '0'; | |
| const tags = this.getAttribute('tags') || ''; | |
| const category = this.getAttribute('category') || 'General'; | |
| this.attachShadow({ mode: 'open' }); | |
| this.shadowRoot.innerHTML = ` | |
| <style> | |
| .card { | |
| transition: transform 0.2s, box-shadow 0.2s; | |
| } | |
| .card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); | |
| } | |
| .tag { | |
| transition: background-color 0.2s; | |
| } | |
| .tag:hover { | |
| background-color: #e0e7ff; | |
| } | |
| .category-badge { | |
| position: absolute; | |
| top: -10px; | |
| right: 10px; | |
| } | |
| </style> | |
| <div class="card bg-white rounded-lg shadow p-4 relative"> | |
| <div class="category-badge bg-indigo-600 text-white text-xs px-2 py-1 rounded-full"> | |
| ${category} | |
| </div> | |
| <h3 class="text-lg font-semibold mb-2">${title}</h3> | |
| <div class="flex items-center text-sm text-gray-500 mb-3"> | |
| <span>Posted by <span class="font-medium">${author}</span></span> | |
| <span class="mx-2">•</span> | |
| <span>${date}</span> | |
| </div> | |
| <div class="flex flex-wrap gap-2 mb-4"> | |
| ${tags.split(',').map(tag => ` | |
| <span class="tag bg-indigo-100 text-indigo-800 text-xs px-2 py-1 rounded">${tag.trim()}</span> | |
| `).join('')} | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <div class="flex space-x-4"> | |
| <div class="flex items-center text-gray-500 text-sm"> | |
| <i data-feather="message-square" class="mr-1 w-4 h-4"></i> | |
| ${comments} comments | |
| </div> | |
| <div class="flex items-center text-gray-500 text-sm"> | |
| <i data-feather="thumbs-up" class="mr-1 w-4 h-4"></i> | |
| ${likes} likes | |
| </div> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center"> | |
| <i data-feather="chevron-right" class="mr-1 w-4 h-4"></i> | |
| View Thread | |
| </button> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| customElements.define('custom-thread-card', CustomThreadCard); |