cfpb / ccdb5-ui / 24524572619

import './MapToolbar.scss';

import { useDispatch, useSelector } from 'react-redux';

import { Button } from '@cfpb/design-system-react';

import { THESE_UNITED_STATES } from '../../constants';

import {

  stateFilterCleared,

  stateFilterRemoved,

} from '../../reducers/filters/filtersSlice';

import { selectFiltersState } from '../../reducers/filters/selectors';

import { Pill } from '../Search/Pill';

import { formatStateLabel } from '../../utils/filters';

  );

      <div className="map-toolbar">

        <section className="state-heading">

          <span className="state-heading__title">State filters applied</span>

        </section>

        <section className="state-filters">

          <ul className="state-filters__list m-tag-group">

            {filteredStates.map((abbr) => (

                key={abbr}

                fieldName="state"

                value={abbr}

                displayValue={formatStateLabel(abbr)}

              />

            ))}

            <li className="state-filters__clear">

              <Button

                appearance="warning"

                label="Clear state filters"

                isLink

                aria-label="Clear all state filters"

                className="state-filters__clear-button"

                onClick={() => {

                }}

              />

            </li>

          </ul>

        </section>

      </div>

    )

  );

};