Make filters modular

src/cryptometrics/components/filters/Filter.js

 import React from "react";
+import Button from "../button/Button";
 
-export function Filter({
+function Filter({
   subject,
   condition,
   value,
@@ -24,29 +25,14 @@ export function Filter({
       </div>
 
       {/* Button */}
-      <button
+      <Button
         onClick={onButtonClick}
-        className="mr-2 p-2 bg-dark-600 hover:dark:bg-dark-800 rounded-r-lg justify-center items-center h-10 w-10 inline-flex font-thin text-white"
+        className="mr-2 p-2 bg-dark-600 hover:dark:bg-dark-800 rounded-r-lg rounded-l-none justify-center items-center h-10 w-10 inline-flex font-thin text-white"
       >
         <span>{buttonIcon}</span>
-      </button>
+      </Button>
     </div>
   );
 }
 
-export function FilterButton({ icon, onClick }) {
-  return (
-    <button
-      className="mx-1 mt-2 font-sans font-normal bg-dark-600 rounded-lg dark:text-neutral-200 dark:hover:text-indigo-600 inline-flex h-10 w-10 justify-center items-center whitespace-nowrap"
-      onClick={onClick}
-    >
-      {icon}
-    </button>
-  );
-}
-
-export function Filters({ children }) {
-  return (
-    <div className="flex flex-wrap justify-start items-center">{children}</div>
-  );
-}
+export default Filter;

src/cryptometrics/components/filters/Filters.js

+import React from "react";
+
+function Filters({ children }) {
+  return (
+    <div className="flex flex-wrap justify-start items-center">{children}</div>
+  );
+}
+
+export default Filters;

src/cryptometrics/components/filters/index.js

+import Filter from "./Filter";
+import Filters from "./Filters";
+
+export { Filter, Filters };

src/cryptometrics/pages/index.js

@@ -18,7 +18,7 @@ import {
   XIcon,
 } from "@heroicons/react/outline";
 import { useFilters, useOnClickOutside } from "../hooks";
-import { Filter, FilterButton, Filters } from "../components/filters/Filter";
+import { Filter, Filters } from "../components/filters";
 import { FilterDropdown } from "../components/dropdown/FilterDropdown";
 import { filterOptions } from "../constants";
 import {
@@ -31,6 +31,7 @@ import Image from "next/image";
 import CryptoRowLineChart from "../components/charts/CryptoRowLineChart";
 import classNames from "classnames";
 import Link from "next/link";
+import { FilterButton } from "../components/button";
 
 export default function Home() {
   const [filters, addFilter, removeFilter] = useFilters([]);