first commit

src/pageElements/Radiogroup.js

@@ -0,0 +1,96 @@
+import { CircleFill, Circle } from "react-bootstrap-icons";
+
+const Radiogroup = (props) => {
+  const {
+    className,
+    classNames,
+    labelText,
+    title,
+    price,
+    ref,
+    onClick,
+    value,
+    options,
+    disabled
+  } = props;
+  const classCheckbox = "checkbox";
+  const classOption = "option";
+
+  return (
+    <div className="radio-option-container">
+      {title && <div className="checkbox-title">{title}</div>}
+      <div className="checkbox-option-div">
+        {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>
+          ))}
+      </div>
+    </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 Radiogroup;
+
+/*
+
+                  */