Add RadioButton component

Signed-off-by: Ajay Bura <ajbura@gmail.com>

diff --git a/src/app/atoms/button/RadioButton.jsx b/src/app/atoms/button/RadioButton.jsx
new file mode 100644 (file)
index 0000000..b10e0cf
--- /dev/null
+++ b/src/app/atoms/button/RadioButton.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './RadioButton.scss';
+
+function RadioButton({ isActive, onToggle }) {
+  return (
+    // eslint-disable-next-line jsx-a11y/control-has-associated-label
+    <button
+      onClick={() => onToggle(!isActive)}
+      className={`radio-btn${isActive ? ' radio-btn--active' : ''}`}
+      type="button"
+    />
+  );
+}
+
+RadioButton.defaultProps = {
+  isActive: false,
+};
+
+RadioButton.propTypes = {
+  isActive: PropTypes.bool,
+  onToggle: PropTypes.func.isRequired,
+};
+
+export default RadioButton;

diff --git a/src/app/atoms/button/RadioButton.scss b/src/app/atoms/button/RadioButton.scss
new file mode 100644 (file)
index 0000000..924c655
--- /dev/null
+++ b/src/app/atoms/button/RadioButton.scss
@@ -0,0 +1,24 @@
+@use '../../partials/flex';
+
+.radio-btn {
+  @extend .cp-fx__row--c-c;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background-color: var(--bg-surface-low);
+  box-shadow: var(--bs-surface-border);
+  cursor: pointer;
+
+  &--active {
+    background-color: var(--bg-positive);
+
+    &::before {
+      content: '';
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      background-color: white;
+      border-radius: 50%;
+    }
+  }
+}
\ No newline at end of file