function SearchFrameworkDropdown()

in src/components/Search/SearchFrameworkDropdown.tsx [22:70]


function SearchFrameworkDropdown({
  frameworkId,
}: SearchFrameworkDropdownProps) {
  const mode = useAppSelector((state) => state.theme.mode);
  const [frameworkIdVal, setFrameWorkValue] = useState(frameworkId);

  const styles = {
    container: style({
      minWidth: '319px',
      $nest: {
        '.MuiInputBase-root': {
          ...(mode === 'light'
            ? ButtonsLightRaw.Dropdown
            : ButtonsDarkRaw.Dropdown),
        },
      },
    }),
  };

  return (
    <FormControl className={`framework-dropdown ${styles.container}`}>
      <Grid item xs={2} display='flex' alignItems='center' mb={0.75}>
        <InputLabel
          id='select-framework-label'
          className='dropdown-select-label'
        >
          {strings.selectLabel}
        </InputLabel>
        <Tooltip
          classes={{
            tooltip: `tooltip-${mode === 'light' ? 'light' : 'dark'}`,
          }}
          placement='top'
          title={strings.tooltip}
        >
          <InfoIcon fontSize='small' className='dropdown-info-icon' />
        </Tooltip>
      </Grid>

      <FrameworkDropdown
        frameworkId={frameworkIdVal}
        labelId='select-framework-label'
        variant='standard'
        mode={mode}
        onChange={setFrameWorkValue}
      />
    </FormControl>
  );
}