From 30b0063eb27b13067a9271134c8b22b951c17511 Mon Sep 17 00:00:00 2001
From: Himanshu Aggarwal <aggarwah@mcmaster.ca>
Date: Tue, 8 Mar 2022 17:06:56 -0500
Subject: [PATCH] Add Radio Input form
---
.../components/radio/RadioForm.js | 62 +++++++++++++++++++
1 file changed, 62 insertions(+)
create mode 100644 src/cryptometrics/components/radio/RadioForm.js
diff --git a/src/cryptometrics/components/radio/RadioForm.js b/src/cryptometrics/components/radio/RadioForm.js
new file mode 100644
index 0000000..294d3db
--- /dev/null
+++ b/src/cryptometrics/components/radio/RadioForm.js
@@ -0,0 +1,62 @@
+import classNames from "classnames";
+import React from "react";
+import Input from "../inputs/Input";
+
+export function RadioInputForm({
+ options,
+ radioValue,
+ onRadioChange,
+ inputValue,
+ onInputChange,
+}) {
+ return (
+ <div>
+ <div className="flex flex-col py-2 space-y-2">
+ {Object.keys(options).map((key) => {
+ return (
+ <div key={"radio_option_" + options[key].id}>
+ <Radio
+ selected={radioValue}
+ radioValue={options[key].name}
+ id={options[key].id}
+ onChange={onRadioChange}
+ />
+ <div className="my-1">
+ {options[key].name === radioValue && (
+ <Input
+ type="text"
+ placeholder="Enter a value here..."
+ initialValue={inputValue}
+ onChange={onInputChange}
+ />
+ )}
+ </div>
+ </div>
+ );
+ })}
+ </div>
+ </div>
+ );
+}
+
+export function Radio({ selected, radioValue, 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,
+ })}
+ >
+ {radioValue}
+ </span>
+ </label>
+ );
+}
--
GitLab