marginTop: spacing()

in public/src/components/channelManagement/MutliSelectTagEditor.tsx [12:75]

• 58 lines of code
• 1 McCabe index (conditional complexity)

      marginTop: spacing(3),
    },
    borderColor: `2px solid ${{ color: grey[700] }}`,
    borderRadius: '2px',
    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={{