diff --git a/src/cryptometrics/components/dropdown/FilterDropdown.js b/src/cryptometrics/components/dropdown/FilterDropdown.js index 12af95a4bbe68fe96f17c1fe9f1088db58e62e15..ec8b87f6020dd42fd1326be639deca67abf018e6 100644 --- a/src/cryptometrics/components/dropdown/FilterDropdown.js +++ b/src/cryptometrics/components/dropdown/FilterDropdown.js @@ -2,7 +2,7 @@ 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 RadioInputForm from "../radio/RadioForm"; import { CSSTransition } from "react-transition-group"; export function FilterDropdown({ diff --git a/src/cryptometrics/components/radio/Radio.js b/src/cryptometrics/components/radio/Radio.js new file mode 100644 index 0000000000000000000000000000000000000000..ff781fd4e18ae3b3005878b759ddf32813336b4c --- /dev/null +++ b/src/cryptometrics/components/radio/Radio.js @@ -0,0 +1,25 @@ +import React from "react"; +import classNames from "classnames"; + +function Radio({ selected, radioValue, radioLabel, onChange }) { + return ( + <label className="inline-flex items-center w-full"> + <input + type="radio" + className="form-radio h-4 w-4 accent-indigo-600 hover:accent-indigo-700" + value={radioValue} + checked={selected === radioValue} + onChange={onChange} + /> + <span + className={classNames("font-poppins ml-2 text-base", { + "dark:text-white font-extralight": selected !== radioValue, + "dark:text-indigo-500": selected === radioValue, + })} + > + {radioLabel} + </span> + </label> + ); +} +export default Radio; diff --git a/src/cryptometrics/components/radio/RadioForm.js b/src/cryptometrics/components/radio/RadioForm.js index 79727e5ad53c360e3f9df0b151542865f044e87f..a6ab2043ccee0df40dbcf8ff65bc84e6611aee50 100644 --- a/src/cryptometrics/components/radio/RadioForm.js +++ b/src/cryptometrics/components/radio/RadioForm.js @@ -1,8 +1,8 @@ -import classNames from "classnames"; import React from "react"; import Input from "../inputs/Input"; +import Radio from "./Radio"; -export function RadioInputForm({ +function RadioInputForm({ inputLeftSymbol, inputRightSymbol, inputType, @@ -46,24 +46,4 @@ export function RadioInputForm({ ); } -export function Radio({ selected, radioValue, radioLabel, onChange }) { - return ( - <label className="inline-flex items-center w-full"> - <input - type="radio" - className="form-radio h-4 w-4 accent-indigo-600 hover:accent-indigo-700" - value={radioValue} - checked={selected === radioValue} - onChange={onChange} - />{" "} - <span - className={classNames("font-poppins ml-2 text-base", { - "dark:text-white font-extralight": selected !== radioValue, - "dark:text-indigo-500": selected === radioValue, - })} - > - {radioLabel} - </span> - </label> - ); -} +export default RadioInputForm;