Make dropdown components modular

src/cryptometrics/components/dropdown/Dropdown.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 import classNames from "classnames";
 import { ChevronDownIcon } from "@heroicons/react/outline";
 import { useOnClickOutside } from "../../hooks";
+import DropdownItem from "./DropdownItem";
 
 function getCoin(list, id) {
   for (let i = 0; i < list.length; i++) {
@@ -58,20 +59,4 @@ function Dropdown({ list, value, setValue, disabled }) {
   );
 }
 
-function DropdownItem({ children, onClick, selected, disabled }) {
-  return (
-    <div
-      className={classNames("py-2 px-4 rounded-xl mx-2", {
-        "opacity-75 dark:text-gray-500": disabled,
-        "bg-white dark:text-black": selected,
-        "hover:bg-dark-600 dark:text-white cursor-pointer":
-          !disabled && !selected,
-      })}
-      onClick={selected || disabled ? undefined : onClick}
-    >
-      {children}
-    </div>
-  );
-}
-
 export default Dropdown;

src/cryptometrics/components/dropdown/DropdownItem.js

+import classNames from "classnames";
+import React from "react";
+
+function DropdownItem({ children, onClick, selected, disabled }) {
+  return (
+    <div
+      className={classNames("py-2 px-4 rounded-xl mx-2", {
+        "opacity-75 dark:text-gray-500": disabled,
+        "bg-white dark:text-black": selected,
+        "hover:bg-dark-600 dark:text-white cursor-pointer":
+          !disabled && !selected,
+      })}
+      onClick={selected || disabled ? undefined : onClick}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default DropdownItem;

src/cryptometrics/components/dropdown/FilterDropdown.js

-import { ArrowRightIcon } from "@heroicons/react/outline";
-import classNames from "classnames";
 import React, { useState, useEffect, useRef } from "react";
-import Button from "../button/Button";
-import RadioInputForm from "../radio/RadioForm";
 import { CSSTransition } from "react-transition-group";
+import FilterDropdownItem from "./FilterDropdownItem";
+import SecondaryFilterDropdown from "./SecondaryFilterDropdown";
+import classNames from "classnames";
 
 export function FilterDropdown({
   filterOptions,
@@ -98,88 +97,4 @@ export function FilterDropdown({
   );
 }
 
-export function SecondaryFilterDropdown({
-  open,
-  onSelectedFilterChange,
-  radioOptions,
-  radioValue,
-  onRadioChange,
-  inputValue,
-  onInputChange,
-  onFilterAdd,
-  inputLeftSymbol,
-  inputRightSymbol,
-  inputType,
-}) {
-  return (
-    <div
-      className={classNames(
-        "dark:bg-dark-600 w-72 max-h-72 rounded-xl mt-2 transition-all duration-100 px-5 py-2 overflow-y-scroll shadow-lg shadow-dark-600",
-        {
-          block: open,
-          hidden: !open,
-        }
-      )}
-    >
-      <RadioInputForm
-        options={radioOptions}
-        radioValue={radioValue}
-        onRadioChange={onRadioChange}
-        inputValue={inputValue}
-        onInputChange={onInputChange}
-        inputLeftSymbol={inputLeftSymbol}
-        inputRightSymbol={inputRightSymbol}
-        inputType={inputType}
-        onSubmit={onFilterAdd}
-      />
-      <div className="flex flex-row space-x-2 mb-2">
-        <Button
-          className="bg-neutral-100 text-gray-700 font-semibold"
-          onClick={() => onSelectedFilterChange(null)}
-        >
-          Cancel
-        </Button>
-        <Button
-          className="bg-indigo-600 text-white font-semibold w-full"
-          onClick={onFilterAdd}
-          type="submit"
-          disabled={inputValue === ""}
-        >
-          Filter
-        </Button>
-      </div>
-    </div>
-  );
-}
-
-// selected: boolean
-function FilterDropdownItem({
-  children,
-  selected,
-  onClick,
-  id,
-  disabled = false,
-}) {
-  return (
-    <div
-      className={classNames(
-        "py-3 px-4 rounded-xl dark:text-neutral-100 border-1 transition-all duration-100 cursor-pointer",
-        {
-          "border-transparent": !selected,
-          "bg-dark-800  border-indigo-600 font-semibold": selected,
-          "hover:bg-dark-800": !disabled,
-        }
-      )}
-      onClick={disabled || !onClick ? undefined : () => onClick(id)}
-    >
-      <div className="flex flex-row items-center">
-        {children}
-        {selected && (
-          <span className="ml-auto">
-            <ArrowRightIcon className="w-4 h-4" />
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}
+export default FilterDropdown;

src/cryptometrics/components/dropdown/FilterDropdownItem.js

+import React from "react";
+import classNames from "classnames";
+import { ArrowRightIcon } from "@heroicons/react/outline";
+
+// selected: boolean
+function FilterDropdownItem({
+  children,
+  selected,
+  onClick,
+  id,
+  disabled = false,
+}) {
+  return (
+    <div
+      className={classNames(
+        "py-3 px-4 rounded-xl dark:text-neutral-100 border-1 transition-all duration-100 cursor-pointer",
+        {
+          "border-transparent": !selected,
+          "bg-dark-800  border-indigo-600 font-semibold": selected,
+          "hover:bg-dark-800": !disabled,
+        }
+      )}
+      onClick={disabled || !onClick ? undefined : () => onClick(id)}
+    >
+      <div className="flex flex-row items-center">
+        {children}
+        {selected && (
+          <span className="ml-auto">
+            <ArrowRightIcon className="w-4 h-4" />
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default FilterDropdownItem;

src/cryptometrics/components/dropdown/SecondaryFilterDropdown.js

+import React from "react";
+import { Button } from "../button";
+import RadioInputForm from "../radio/RadioForm";
+import classNames from "classnames";
+
+export function SecondaryFilterDropdown({
+  open,
+  onSelectedFilterChange,
+  radioOptions,
+  radioValue,
+  onRadioChange,
+  inputValue,
+  onInputChange,
+  onFilterAdd,
+  inputLeftSymbol,
+  inputRightSymbol,
+  inputType,
+}) {
+  return (
+    <div
+      className={classNames(
+        "dark:bg-dark-600 w-72 max-h-72 rounded-xl mt-2 transition-all duration-100 px-5 py-2 overflow-y-scroll shadow-lg shadow-dark-600",
+        {
+          block: open,
+          hidden: !open,
+        }
+      )}
+    >
+      <RadioInputForm
+        options={radioOptions}
+        radioValue={radioValue}
+        onRadioChange={onRadioChange}
+        inputValue={inputValue}
+        onInputChange={onInputChange}
+        inputLeftSymbol={inputLeftSymbol}
+        inputRightSymbol={inputRightSymbol}
+        inputType={inputType}
+        onSubmit={onFilterAdd}
+      />
+      <div className="flex flex-row space-x-2 mb-2">
+        <Button
+          className="bg-neutral-100 text-gray-700 font-semibold"
+          onClick={() => onSelectedFilterChange(null)}
+        >
+          Cancel
+        </Button>
+        <Button
+          className="bg-indigo-600 text-white font-semibold w-full"
+          onClick={onFilterAdd}
+          type="submit"
+          disabled={inputValue === ""}
+        >
+          Filter
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default SecondaryFilterDropdown;

src/cryptometrics/pages/index.js

@@ -19,7 +19,7 @@ import {
 } from "@heroicons/react/outline";
 import { useFilters, useOnClickOutside } from "../hooks";
 import { Filter, Filters } from "../components/filters";
-import { FilterDropdown } from "../components/dropdown/FilterDropdown";
+import FilterDropdown from "../components/dropdown/FilterDropdown";
 import { filterOptions } from "../constants";
 import {
   Table,