+12 -14

src/components/Resources/Resources.css

Reviewed

··· 661 661 .filter-controls-container { 662 662 flex-direction: column; 663 663 } 664 664 - 665 665 - .resources-disclaimer { 666 666 - width: 100%; 667 667 - } 668 664 } 669 665 670 666 @media (max-width: 768px) { ··· 685 681 .search-filters-container { 686 682 align-items: stretch; 687 683 flex-direction: row; 688 688 - gap: 2.5rem; 689 684 } 690 685 691 686 .search-container { ··· 696 691 flex-direction: column; 697 692 align-items: flex-start; 698 693 gap: 15px; 699 699 - } 700 700 - 701 701 - .filter-dropdown { 702 702 - width: 100%; 703 703 - } 704 704 - 705 705 - .toggle-filters { 706 706 - width: 100%; 707 707 - justify-content: space-between; 708 694 } 709 695 710 696 .filter-dropdowns { ··· 770 756 align-items: flex-start; 771 757 gap: 10px; 772 758 } 759 759 + 760 760 + .search-filters-container { 761 761 + align-items: stretch; 762 762 + flex-direction: row; 763 763 + gap: 2.5rem; 764 764 + } 765 765 + 766 766 + .filter-dropdown { 767 767 + display: flex; 768 768 + flex-direction: column; 769 769 + } 770 770 + 773 771 }

+26 -22

src/components/Resources/Resources.js

Reviewed

··· 217 217 return resource.categories && resource.categories.some(cat => cat.name === categoryName); 218 218 }; 219 219 220 220 - // Filter resources based on active category, search query, and filters 221 221 - const filteredResources = useMemo(() => { 222 222 - return resources.filter(resource => { 223 223 - // Filter by category 224 224 - const categoryMatch = resourceHasCategory(resource, activeCategory); 225 225 - 226 226 - // Filter by search query 227 227 - const searchMatch = 228 228 - resource.name.toLowerCase().includes(searchQuery.toLowerCase()) || 229 229 - resource.description.toLowerCase().includes(searchQuery.toLowerCase()) || 230 230 - (resource.domain && resource.domain.toLowerCase().includes(searchQuery.toLowerCase())); 231 231 - 232 232 - // Filter by "new" status if the toggle is active 233 233 - const newMatch = !showNewOnly || isNewResource(resource.created_at); 234 234 - 235 235 - // Filter by "impacts score" status if the toggle is active 236 236 - const scoreMatch = !showScoreImpactOnly || impactsScore(resource); 237 237 - 238 238 - return categoryMatch && searchMatch && newMatch && scoreMatch; 239 239 - }); 240 240 - }, [resources, activeCategory, searchQuery, showNewOnly, showScoreImpactOnly]); 220 220 + // Filter resources based on active category, search query, and filters 221 221 + const filteredResources = useMemo(() => { 222 222 + return resources.filter(resource => { 223 223 + // Filter by category 224 224 + const categoryMatch = resourceHasCategory(resource, activeCategory); 225 225 + 226 226 + // Filter by search query 227 227 + const searchMatch = 228 228 + resource.name.toLowerCase().includes(searchQuery.toLowerCase()) || 229 229 + resource.description.toLowerCase().includes(searchQuery.toLowerCase()) || 230 230 + (resource.domain && resource.domain.toLowerCase().includes(searchQuery.toLowerCase())) || 231 231 + // Add search in tags 232 232 + (resource.tags && resource.tags.some(tag => 233 233 + tag.name.toLowerCase().includes(searchQuery.toLowerCase()) 234 234 + )); 235 235 + 236 236 + // Filter by "new" status if the toggle is active 237 237 + const newMatch = !showNewOnly || isNewResource(resource.created_at); 238 238 + 239 239 + // Filter by "impacts score" status if the toggle is active 240 240 + const scoreMatch = !showScoreImpactOnly || impactsScore(resource); 241 241 + 242 242 + return categoryMatch && searchMatch && newMatch && scoreMatch; 243 243 + }); 244 244 + }, [resources, activeCategory, searchQuery, showNewOnly, showScoreImpactOnly]); 241 245 242 246 // Get featured resources 243 247 const featuredResources = useMemo(() => { ··· 513 517 <div className="resource-tags"> 514 518 {resource.tags.map((tag, idx) => ( 515 519 <span key={idx} className="resource-tag"> 516 516 - {tag.name} 520 520 + #{tag.name} 517 521 </span> 518 522 ))} 519 523 </div>