1 files changed, 24 insertions, 35 deletions
diff --git a/src/settings/components/ui/Radio.tsx b/src/settings/components/ui/Radio.tsx
index 20d4ad6..c0d4dd9 100644
--- a/src/settings/components/ui/Radio.tsx
+++ b/src/settings/components/ui/Radio.tsx
@@ -1,44 +1,33 @@
 import React from "react";
-import "./Input.scss";
+import styled from "styled-components";
 
-interface Props extends React.AllHTMLAttributes<HTMLElement> {
-  name: string;
-  error?: string;
+const Container = styled.div`
+  font-family: system-ui;
+`;
+
+interface Props extends React.InputHTMLAttributes<HTMLInputElement> {
   label: string;
-  value: string;
   onValueChange?: (name: string, value: string) => void;
-  onBlur?: (e: React.FocusEvent<Element>) => void;
 }
 
-class Input extends React.Component<Props> {
-  renderRadio(props: Props) {
-    const inputClassName = props.error ? "input-error" : "";
-    const pp = { ...props };
-    delete pp.onValueChange;
-    return (
-      <div className="settings-ui-input">
-        <label>
-          <input
-            type="radio"
-            className={inputClassName}
-            onChange={this.bindOnChange.bind(this)}
-            {...pp}
-          />
-          {props.label}
-        </label>
-      </div>
-    );
-  }
+const Radio: React.FC<Props> = (props) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (props.onValueChange) {
+      props.onValueChange(e.target.name, e.target.value);
+    }
+  };
 
-  render() {
-    return this.renderRadio(this.props);
-  }
+  const pp = { ...props };
+  delete pp.onValueChange;
 
-  bindOnChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) {
-    if (this.props.onValueChange) {
-      this.props.onValueChange(e.target.name, e.target.value);
-    }
-  }
-}
+  return (
+    <Container>
+      <label htmlFor={props.id}>
+        <input type="radio" onChange={onChange} {...pp} />
+        {props.label}
+      </label>
+    </Container>
+  );
+};
 
-export default Input;
+export default Radio;