This repository has been archived on 2022-10-07. You can view files and clone it, but cannot push or open issues or pull requests.
2022-02-18 08:20:47 +00:00
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import "./Switch.css";
|
2022-02-17 11:53:32 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Primary UI component for user interaction
|
|
|
|
*/
|
|
|
|
export const Switch = ({ isOn, handleToggle }) => {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<input
|
|
|
|
checked={isOn}
|
|
|
|
onChange={handleToggle}
|
|
|
|
className="react-switch-checkbox"
|
|
|
|
id={`react-switch-new`}
|
|
|
|
type="checkbox"
|
|
|
|
/>
|
2022-02-18 08:20:47 +00:00
|
|
|
<label className={"react-switch-label"} htmlFor={`react-switch-new`}>
|
|
|
|
<span className={`react-switch-button ${isOn ? "bg-primary" : "bg-palette-200"}`} />
|
2022-02-17 11:53:32 +00:00
|
|
|
</label>
|
|
|
|
</>
|
2022-02-18 08:20:47 +00:00
|
|
|
);
|
|
|
|
};
|
2022-02-17 11:53:32 +00:00
|
|
|
|
|
|
|
Switch.propTypes = {
|
|
|
|
/**
|
|
|
|
* Switch's current value
|
|
|
|
*/
|
|
|
|
isOn: PropTypes.bool,
|
|
|
|
/**
|
|
|
|
* Function to execute on change
|
|
|
|
*/
|
|
|
|
handleToggle: PropTypes.func,
|
2022-02-18 08:20:47 +00:00
|
|
|
};
|
2022-02-17 11:53:32 +00:00
|
|
|
|
|
|
|
Switch.defaultProps = {
|
|
|
|
isOn: false,
|
2022-02-18 08:20:47 +00:00
|
|
|
};
|