diff --git a/src/components/Checkbox/index.jsx b/src/components/Checkbox/index.jsx new file mode 100644 index 0000000..8c9cbf6 --- /dev/null +++ b/src/components/Checkbox/index.jsx @@ -0,0 +1,42 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Input from '../Input'; + +export default function Checkbox({ + name, + checked, + label, + wrapperStyle, + inputStyle, + labelStyle, + ...restProps +}) { + return ( +
+ + +
+ ); +} + +Checkbox.propTypes = { + name: PropTypes.string, + checked: PropTypes.bool, + label: PropTypes.string, + wrapperStyle: PropTypes.object, + inputStyle: PropTypes.object, + labelStyle: PropTypes.object, +}; + +Checkbox.defaultProps = { + checked: false +}; diff --git a/src/components/Input/index.jsx b/src/components/Input/index.jsx new file mode 100644 index 0000000..625be64 --- /dev/null +++ b/src/components/Input/index.jsx @@ -0,0 +1,55 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +export default function Input({ + type, + name, + minLength, + maxLength, + size, + ...restProps +}) { + return ( + + ); +} + +Input.propTypes = { + type: PropTypes.oneOf([ + 'color', + 'date', + 'datetime-local', + 'email', + 'file', + 'hidden', + 'checkbox', + 'radio', + 'image', + 'month', + 'number', + 'password', + 'range', + 'search', + 'tel', + 'text', + 'time', + 'url', + 'week', + ]).isRequired, + name: PropTypes.string, + minLength: PropTypes.number, + maxLength: PropTypes.number, + size: PropTypes.number, +}; + +Input.defaultProps = { + type: 'text', +}; diff --git a/src/components/Radio/index.jsx b/src/components/Radio/index.jsx new file mode 100644 index 0000000..b062941 --- /dev/null +++ b/src/components/Radio/index.jsx @@ -0,0 +1,45 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Input from '../Input'; + +export default function Radio({ + name, + value, + checked, + label, + wrapperStyle, + inputStyle, + labelStyle, + ...restProps +}) { + return ( +
+ + +
+ ); +} + +Radio.propTypes = { + name: PropTypes.string, + value: PropTypes.string, + checked: PropTypes.bool, + label: PropTypes.string, + wrapperStyle: PropTypes.object, + inputStyle: PropTypes.object, + labelStyle: PropTypes.object, +}; + +Radio.defaultProps = { + checked: false +};