From 03b7ccaa5c152c8d7ed73374be8ad4d4d034845b Mon Sep 17 00:00:00 2001
From: sowgro <tpoke.ferrari@gmail.com>
Date: Thu, 7 Nov 2024 12:40:42 -0500
Subject: Implement sorting and refactor

---
 extension/src/components/RadioButtonGroup.tsx | 37 +++++++++++++++++++++++++++
 1 file changed, 37 insertions(+)
 create mode 100644 extension/src/components/RadioButtonGroup.tsx

(limited to 'extension/src/components/RadioButtonGroup.tsx')

diff --git a/extension/src/components/RadioButtonGroup.tsx b/extension/src/components/RadioButtonGroup.tsx
new file mode 100644
index 0000000..297800d
--- /dev/null
+++ b/extension/src/components/RadioButtonGroup.tsx
@@ -0,0 +1,37 @@
+import React, {ReactElement, useEffect, useId, useState} from "react";
+
+/**
+ * A component for a group of radio buttons where only one can be selected
+ *
+ * @param props.children html <option> elements for each radio option
+ * @param props.value The option which is selected
+ * @param props.onChange A function that will be called when the selected option changes
+ */
+function RadioButtonGroup(props: { children: ReactElement<HTMLOptionElement>[], value: any, onChange?: (arg0: any) => void }) {
+    const [selected, setSelected] = useState(props.value);
+    useEffect(() => {
+        setSelected(props.value);
+    }, [props.value]);
+    useEffect(() => {
+        props.onChange && props.onChange(selected);
+    }, [selected])
+
+    return (
+        <div className="radio-group">
+            { props.children.map((item) => (
+                <label>
+                    <input
+                        type="radio"
+                        name={useId()}
+                        value={item.props.value}
+                        checked={item.props.value === selected}
+                        onChange={e => setSelected(e.target.value)}
+                    />
+                    {item.props.children.toString()}
+                </label>
+            )) }
+        </div>
+    )
+}
+
+export default RadioButtonGroup
\ No newline at end of file
-- 
cgit v1.2.3