padding: spacing()

in public/src/components/channelManagement/MutliSelectTagEditor.tsx [16:94]


    padding: spacing(2),
  },
}));

interface Option {
  label: string;
  value: string;
}

const options: Option[] = [
  'environment/climate-change',
  'environment/climate-crisis',
  'environment/environment',
  'science/science',
  'politics/politics',
  'us-news/us-politics',
  'australia-news/australian-politics',
  'world/world',
  'world/europe-news',
  'world/russia',
  'books/books',
  'culture/culture',
  'world/coronavirus-outbreak',
  'world/race',
  'inequality/inequality',
  'technology/technology',
  'business/business',
  'tone/recipes',
].map(id => ({
  label: id,
  value: id,
}));

interface MultiselectAutocompleteProps {
  disabled: boolean;
  tagIds: string[] | null;
  onUpdate: (tagIds: string[]) => void;
}

const MultiselectAutocomplete: React.FC<MultiselectAutocompleteProps> = ({
  disabled,
  tagIds,
  onUpdate,
}: MultiselectAutocompleteProps) => {
  const classes = useStyles();

  const [inputValue, setInputValue] = React.useState<string>('');

  return (
    <div className={classes.container}>
      <span style={{ fontSize: '1rem', fontWeight: 'normal' }}>Filter article count by tag</span>
      <Autocomplete
        id={'multi-seelect-tag'}
        multiple
        disabled={disabled}
        options={options}
        getOptionLabel={option => option.label}
        value={tagIds?.map<Option>(tag => ({ label: tag, value: tag }))}
        inputValue={inputValue}
        componentsProps={{
          popper: {
            modifiers: [
              {
                name: 'flip',
                enabled: false,
              },
              {
                name: 'preventOverflow',
                enabled: false,
              },
            ],
          },
        }}
        onInputChange={(event, newInputValue, reason): void => {
          if (reason === 'input') {
            setInputValue(newInputValue);
          }
        }}
        renderInput={params => (