\n 🇿🇦 South African Heritage\n

\n \n

\n onCategoryChange(null)}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${\n activeCategory === null\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n All Sites\n \n \n {categories.map((category) => (\n onCategoryChange(category.id)}\n className={`px-3 py-2 rounded-md text-sm font-medium transition-colors flex items-center space-x-1 ${\n activeCategory === category.id\n ? 'bg-blue-100 text-blue-700'\n : 'text-gray-500 hover:text-gray-700 hover:bg-gray-100'\n }`}\n >\n {category.icon}\n {category.name}\n \n ))}\n

\n \n {/* Mobile menu */}\n

\n onCategoryChange(e.target.value || null)}\n className=\"block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500\"\n >\n \n {categories.map((category) => (\n \n ))}\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/ese123/my-first-val/code/frontend/components/Navigation.tsx","extension","actionData","errors"]