do the thing with prominent options set

ducompsoc · Jun 21, 2024 · f91f67a · f91f67a
1 parent 6a2f57a
commit f91f67a
Showing 1 changed file with 29 additions and 15 deletions.
diff --git a/src/components/ui/combobox.tsx b/src/components/ui/combobox.tsx
@@ -10,7 +10,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
-  CommandList,
+  CommandList, CommandSeparator,
 } from "@/components/ui/command"
 import {
   Drawer,
@@ -195,27 +195,41 @@ const ComboBoxContent = React.forwardRef<
 ComboBoxContent.displayName = "ComboBoxContent"
 
 function OptionList() {
-  const { options, setSelectedOption, setOpen, onChange } = useComboBox();
+  const { options, prominentOptions, setSelectedOption, setOpen, onChange } = useComboBox();
+
+  function renderOption(option: Option<React.Key>) {
+    return (
+      <CommandItem
+        key={option.value}
+        value={option.value.toString()}
+        onSelect={() => {
+          setSelectedOption(option)
+          onChange(option.value)
+          setOpen(false)
+        }}
+      >
+        {option.label}
+      </CommandItem>
+    )
+  }
 
   return (
     <Command>
       <CommandInput placeholder="Filter options..." />
       <CommandList>
         <CommandEmpty>No results found.</CommandEmpty>
         <CommandGroup>
-          {options.map((option) => (
-            <CommandItem
-              key={option.value}
-              value={option.value.toString()}
-              onSelect={() => {
-                setSelectedOption(option)
-                onChange(option.value)
-                setOpen(false)
-              }}
-            >
-              {option.label}
-            </CommandItem>
-          ))}
+          {options
+            .filter(option => prominentOptions?.has(option.value) ?? false)
+            .map(renderOption)
+          }
+        </CommandGroup>
+        <CommandSeparator />
+        <CommandGroup>
+          {options
+            .filter(option => !(prominentOptions?.has(option.value) ?? false))
+            .map(renderOption)
+          }
         </CommandGroup>
       </CommandList>
     </Command>