V2-40

<script>
// Data configuration for the items
const itemCategories = {
  '/project/netflix': ['Tech', 'Movie'],
  '/project/nokia': ['Tech'],
  '/project/open-ai': ['AI', 'Tech'],
  '/project/aizome-homestay': ['Hotel'],
  '/project/alphabet': ['Tech'],
  '/project/microsoft': ['Tech', 'AI']
};

// Function to initialize the filter system
function initializeFilter() {
  // Create filter bar container
  const filterBar = document.createElement('div');
  filterBar.id = 'filterBar';
  
  // Create filter options
  const filters = ['All', 'AI', 'Tech', 'Movie', 'Hotel'];
  
  filters.forEach(filter => {
    const filterLink = document.createElement('a');
    filterLink.href = '#';
    filterLink.textContent = filter;
    filterLink.classList.add('filter-link');
    filterLink.dataset.filter = filter;
    
    // Add click event listener
    filterLink.addEventListener('click', function(e) {
      e.preventDefault();
      
      // Remove active class from all filters
      document.querySelectorAll('.filter-link').forEach(link => {
        link.classList.remove('active');
      });
      
      // Add active class to clicked filter
      this.classList.add('active');
      
      // Filter the items
      filterItems(filter);
    });
    
    filterBar.appendChild(filterLink);
  });
  
  // Insert filter bar before the grid
  const gridContainer = document.getElementById('gridThumbs');
  gridContainer.parentNode.insertBefore(filterBar, gridContainer);
  
  // Set 'All' as active by default
  document.querySelector('[data-filter="All"]').classList.add('active');
}

// Function to filter items
function filterItems(filterValue) {
  const gridItems = document.querySelectorAll('#gridThumbs .grid-item');
  
  gridItems.forEach(item => {
    const href = item.getAttribute('href');
    
    if (filterValue === 'All') {
      item.style.display = '';
    } else {
      // Check if item belongs to selected category
      if (itemCategories[href] && itemCategories[href].includes(filterValue)) {
        item.style.display = '';
      } else {
        item.style.display = 'none';
      }
    }
  });
}

// Initialize the filter when DOM is loaded
document.addEventListener('DOMContentLoaded', initializeFilter);
</script>