Add dropdown menus to M&E Data Entry view

2025-08-20 17:44:21 -07:00
parent 7e23c6a98d
commit 8630340a07
4 changed files with 81 additions and 22 deletions
@@ -0,0 +1,30 @@
+import { Portal, Select } from '@chakra-ui/react';
+
+export default function DropDownMenu({ collection, placeholder = "Select...", size = "sm", width = "200px" }) {
+    return (
+        <Select.Root collection={collection} size={size} width={width}>
+            <Select.HiddenSelect />
+            <Select.Control>
+                <Select.Trigger>
+                    <Select.ValueText placeholder={placeholder} />
+                </Select.Trigger>
+                <Select.IndicatorGroup>
+                    <Select.ClearTrigger />
+                    <Select.Indicator />
+                </Select.IndicatorGroup>
+            </Select.Control>
+            <Portal>
+                <Select.Positioner>
+                    <Select.Content>
+                        {collection.items.map((item) => (
+                            <Select.Item key={item.value} item={item}>
+                                {item.label}
+                                <Select.ItemIndicator />
+                            </Select.Item>
+                        ))}
+                    </Select.Content>
+                </Select.Positioner>
+            </Portal>
+        </Select.Root>
+    );
+}