import React, { useMemo } from 'react'; import { View, Text, Pressable, ScrollView, type ViewStyle } from 'react-native'; import { Image } from 'expo-image'; interface SubcategoryItem { id: string; name: string; image: string; section: string; } interface SubcategoryGridProps { items: SubcategoryItem[]; onItemPress: (id: string) => void; } export default function SubcategoryGrid({ items, onItemPress, }: SubcategoryGridProps) { const grouped = useMemo(() => { const map = new Map(); for (const item of items) { const list = map.get(item.section) ?? []; list.push(item); map.set(item.section, list); } return map; }, [items]); return ( {Array.from(grouped.entries()).map(([section, sectionItems]) => ( {/* Section title */} {section} {/* 3-column grid */} {sectionItems.map((item) => ( onItemPress(item.id)} accessibilityRole="button" accessibilityLabel={item.name} className="w-1/3 items-center mb-4" style={({ pressed }: { pressed: boolean }): ViewStyle => ({ opacity: pressed ? 0.7 : 1, })} > {item.name} ))} ))} ); }

Category (2)

Subcategory Grid

Sidebar Menu