js/components/Carousel.js

// Carousel.js - Carousel component for artifacts
import { renderArtifactCard } from './Card.js';

export function createArtifactCarousel(artifacts, containerId) {
    const container = document.getElementById(containerId);
    if (!container) return;
    
    const cardsHtml = artifacts.map((artifact, index) => 
        renderArtifactCard(artifact, { index, containerId })
    ).join('');
    
    container.innerHTML = `
        <div class="relative">
            <!-- Carousel container -->
            <div class="flex overflow-x-auto scrollbar-hide carousel-scroll space-x-4 pb-4" id="${containerId}-scroll">
                ${cardsHtml}
            </div>
            
            <!-- Navigation arrows (hidden on mobile) -->
            <button class="carousel-arrow absolute left-0 top-1/2 transform -translate-y-1/2 bg-white shadow-lg rounded-full p-2 hover:bg-gray-50 transition-colors z-10" 
                    onclick="scrollCarousel('${containerId}-scroll', -320)"
                    aria-label="Scroll carousel left">
                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"></path>
                </svg>
            </button>
            <button class="carousel-arrow absolute right-0 top-1/2 transform -translate-y-1/2 bg-white shadow-lg rounded-full p-2 hover:bg-gray-50 transition-colors z-10" 
                    onclick="scrollCarousel('${containerId}-scroll', 320)"
                    aria-label="Scroll carousel right">
                <svg class="w-4 h-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
                </svg>
            </button>
        </div>
    `;
}

// Utility function for carousel navigation
window.scrollCarousel = function(containerId, scrollAmount) {
    const container = document.getElementById(containerId);
    if (container) {
        container.scrollBy({ left: scrollAmount, behavior: 'smooth' });
    }
};

// Add toggle function
window.toggleCardView = function(cardId) {
    const card = document.getElementById(cardId);
    const defaultView = card.querySelector('.default-view');
    const descriptionView = card.querySelector('.description-view');
    const expandIcon = card.parentElement.querySelector('.expand-icon');
    const collapseIcon = card.parentElement.querySelector('.collapse-icon');
    
    if (defaultView.classList.contains('hidden')) {
        // Show default view
        defaultView.classList.remove('hidden');
        descriptionView.classList.add('hidden');
        expandIcon.classList.remove('hidden');
        collapseIcon.classList.add('hidden');
    } else {
        // Show description view
        defaultView.classList.add('hidden');
        descriptionView.classList.remove('hidden');
        expandIcon.classList.add('hidden');
        collapseIcon.classList.remove('hidden');
    }
};