Function SelectOption

packages/ui/src/components/Select/SelectOption.tsx:13–37

({
  id,
  label,
  as = 'li',
  children,
})

};

export const SelectOption: FC<SelectOptionProps> = ({
  id,
  label,
  as = 'li',
  children,
}) => {
  return (
    <ListboxOption value={id} as={as}>
      {({ active, selected }) => (
        <div
          className={cn(
            'text-foreground cursor-pointer px-1 py-1',
            active && 'outline-border outline-2',
          )}
          onMouseDown={(e) => e.preventDefault()}
        >
          <span className="relative inline-flex w-full flex-row items-center justify-between">
            {children ?? label}
            {selected && <span className="flex items-center">✓</span>}
          </span>
        </div>
      )}
    </ListboxOption>
  );
};