cally/components/pages/grocery/CategoryDropdown.tsx

import React from "react";
import { View, Text, TouchableOpacity } from "react-native-ui-lib";
import { GroceryCategory, useGroceryContext } from "@/contexts/GroceryContext";
import { ScrollView } from "react-native-gesture-handler";

const CategoryDropdown = (props: {
  setSelectedCategory: (category: GroceryCategory) => void;
}) => {
  const groceryCategories = Object.values(GroceryCategory);

  return (
    <View height={100}>
      <ScrollView>
        {groceryCategories.map((category) => (
          <TouchableOpacity
            onPress={() => {
              props.setSelectedCategory(category);
            }}
          >
            <View
              key={category}
              style={{
                padding: 10,
              }}
            >
              <Text style={{fontFamily: "Manrope_400Regular"}}>{category}</Text>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
};

export default CategoryDropdown;