Location filter modal (#27)

* Add Location filter modal, update TimeFilter to also use the same FilterButton

* Rename "United Kingdom of Great Britain and Northern Island" to "United Kingdom"

* Remove count from Global/Online filter options

components/FilterArea.tsx

@@ -2,8 +2,9 @@ import React, { Fragment } from 'react';
 import AnimateHeight from 'react-animate-height';
 
 import CategoryFilter from './CategorySelect';
-import Dropdown from './Dropdown';
-import { CloseIcon, DateIcon, FilterIcon, LocationPin } from './Icons';
+import { CloseIcon, FilterIcon } from './Icons';
+import { LocationFilter } from './LocationFilter';
+import { TimeFilter } from './TimeFilter';
 
 export const Filters = ({
   filter,
@@ -16,7 +17,6 @@ export const Filters = ({
   collectivesInView,
 }) => {
   const [expanded, setExpanded] = React.useState(!mobile);
-
   return (
     <div className="relative z-50 bg-white">
       {mobile && (
@@ -49,43 +49,23 @@ export const Filters = ({
       <AnimateHeight id="date-location-filters" duration={500} height={collectivesInView ? 'auto' : 0}>
         <div className="mt-1 border-t pb-1 pt-2 lg:mt-4 lg:pt-4">
           <div className="space-y-1 lg:space-y-2">
-            <Dropdown
-              ariaLabel="Location"
+            <LocationFilter
+              filter={filter}
               currentCategoryColor={currentCategory.color.name}
-              fieldLabel={
-                <div className="flex items-center gap-2 whitespace-nowrap text-sm font-medium">
-                  <LocationPin />
-                  <span>Location</span>
-                </div>
-              }
-              options={locationOptions.map(option => ({
-                ...option,
-                value: JSON.stringify({ type: option.type, value: option.value }),
-              }))}
-              value={JSON.stringify(filter.location)}
-              onOpen={() => {
-                mobile && setExpanded(false);
-              }}
-              onChange={option => {
-                setFilter({ location: JSON.parse(option.value) });
+              locationOptions={locationOptions}
+              setLocationFilter={locationFilter => {
+                setFilter({ location: locationFilter });
               }}
             />
-            <Dropdown
-              ariaLabel="Date range"
+            <TimeFilter
+              filter={filter}
               currentCategoryColor={currentCategory.color.name}
-              fieldLabel={
-                <div className="flex items-center gap-2 whitespace-nowrap text-sm font-medium">
-                  <DateIcon />
-                  <span>Date range</span>
-                </div>
-              }
               options={[
                 { value: 'ALL', label: 'All time' },
                 { value: 'PAST_YEAR', label: 'Past 12 months' },
                 { value: 'PAST_QUARTER', label: 'Past 3 months' },
               ]}
-              value={filter.timePeriod}
-              onChange={({ value }) => {
+              setTimeFilter={value => {
                 setFilter({ timePeriod: value });
               }}
             />

components/FilterButton.tsx

@@ -0,0 +1,39 @@
+import React, { forwardRef } from 'react';
+
+import { ChevronUpDown } from './Icons';
+
+interface Props {
+  currentCategoryColor: string;
+  selectedOption?: any;
+  icon: any;
+  label: string;
+  onClick?: any;
+}
+
+const FilterButton: React.ForwardRefRenderFunction<HTMLButtonElement, Props> = (
+  { currentCategoryColor, selectedOption, icon, label, onClick },
+  ref,
+) => {
+  return (
+    <button
+      ref={ref}
+      onClick={onClick}
+      className={`group flex w-full items-center justify-between gap-2 rounded-lg border-2 bg-opacity-75 py-2 px-3 transition-colors   ${
+        selectedOption && selectedOption.value !== 'ALL'
+          ? `bg-${currentCategoryColor}-50 border-transparent hover:bg-opacity-100 hover:border-${currentCategoryColor}-100`
+          : 'border-transparent bg-white hover:border-gray-100  hover:bg-gray-50 '
+      }`}
+    >
+      <div className="flex items-center gap-2 whitespace-nowrap  font-medium">
+        {icon}
+        <span>{label}</span>
+      </div>
+      <div className="flex items-center gap-1.5 overflow-hidden whitespace-nowrap">
+        <span className="overflow-hidden overflow-ellipsis">{selectedOption?.label ?? 'All locations'}</span>{' '}
+        <ChevronUpDown className="-mr-1 -ml-0.5 mt-0.5 h-4 w-4 flex-shrink-0" />
+      </div>
+    </button>
+  );
+};
+
+export default forwardRef<HTMLButtonElement, Props>(FilterButton);