more

2024-01-25 13:18:53 -06:00
parent 9dff4abd04
commit a076a3bf9f
3 changed files with 100 additions and 45 deletions
--- a/src/pageElements/Radio.js
+++ b/src/pageElements/Radio.js
@@ -1,23 +1,95 @@
+import { CircleFill, Circle } from "react-bootstrap-icons";

-const Radio = ({
-  rightLabel,
-  leftLabel,
-  containerClassName,
-  labelClassName,
-  ...props
-}) => {
+const Radio = (props) => {
+  const {
+    className,
+    classNames,
+    labelText,
+    title,
+    price,
+    ref,
+    onClick,
+    value,
+    options,
+    disabled,
+  } = props;
+  const classCheckbox = "checkbox";
+  const classOption = "option";
+  const foo = [];
  return (
-    <div className={containerClassName}>
-      <label className={labelClassName}>
-        <input {...props} type="radio" />
-        {leftLabel && <span>{leftLabel}</span>}
-        <div></div>
-        {rightLabel && <span>{rightLabel}</span>}
-      </label>
+    <div>
+      {options.map((option) => (
+        <>{option.name}</>
+      ))}
    </div>
  );
 };

+/**
+ * A radio button is a quick way to extract a single coded answer from our users by presenting multiple possibilities and allowing only one option to be chosen.
+ */
+
 export default Radio;

-//
+/*
+        {options &&
+          options?.length &&
+          options.map((option, index) => (
+            <div
+              className="option-container"
+              key={option.name}
+              onClick={() => !disabled && onClick && onClick(option)}
+            >
+              <div className="checked-icon">
+                {value === option.value ? (
+                  <div className="zora">
+                    <div className="circle-container">
+                      <CircleFill
+                        className={
+                          value === option.value
+                            ? "clickable-icon-active"
+                            : "clieckable-icon"
+                        }
+                        color="#1a76c7"
+                        size="20px"
+                        onClick={(e) => {
+                          !disabled && onClick(e);
+                        }}
+                      />
+                    </div>
+
+                    <div
+                      className="option-label"
+                      htmlFor={"helper-radio-" + index}
+                    >
+                      {option.name}
+                    </div>
+                  </div>
+                ) : (
+                  <div className="zora">
+                    <div className="circle-container">
+                      <Circle
+                        className={
+                          value === option.value
+                            ? "clickable-icon-active"
+                            : "clieckable-icon"
+                        }
+                        color="#1a76c7"
+                        size="20px"
+                        onClick={(e) => {
+                          !disabled && onClick(e);
+                        }}
+                      />
+                    </div>
+                    <div
+                      className="option-label"
+                      htmlFor={"helper-radio-" + index}
+                    >
+                      {option.name}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </div>
+          ))}
+        */