87 lines
2.1 KiB
React
87 lines
2.1 KiB
React
import PropTypes from "prop-types";
|
|
import { FormControlLabel, Radio as MUIRadio, Typography } from "@mui/material";
|
|
import { useTheme } from "@emotion/react";
|
|
import RadioChecked from "../../../assets/icons/radio-checked.svg?react";
|
|
import "./index.css";
|
|
|
|
/**
|
|
* Radio component.
|
|
*
|
|
* @component
|
|
* @example
|
|
* // Usage:
|
|
* <Radio
|
|
* title="Radio Button Title"
|
|
* desc="Radio Button Description"
|
|
* size="small"
|
|
* />
|
|
*
|
|
* @param {Object} props - The component props.
|
|
* @param {string} props.id - The id of the radio button.
|
|
* @param {string} props.title - The title of the radio button.
|
|
* @param {string} [props.desc] - The description of the radio button.
|
|
* @param {string} [props.size="small"] - The size of the radio button.
|
|
* @returns {JSX.Element} - The rendered Radio component.
|
|
*/
|
|
|
|
const Radio = (props) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<FormControlLabel
|
|
className="custom-radio-button"
|
|
checked={props.checked}
|
|
value={props.value}
|
|
control={
|
|
<MUIRadio
|
|
id={props.id}
|
|
size={props.size}
|
|
checkedIcon={<RadioChecked />}
|
|
sx={{
|
|
color: "transparent",
|
|
width: 16,
|
|
height: 16,
|
|
boxShadow: "inset 0 0 0 1px #656a74",
|
|
mt: theme.spacing(0.5),
|
|
}}
|
|
/>
|
|
}
|
|
onChange={props.onChange}
|
|
label={
|
|
<>
|
|
<Typography component="p">{props.title}</Typography>
|
|
<Typography
|
|
component="h6"
|
|
mt={theme.spacing(1)}
|
|
color={theme.palette.text.secondary}
|
|
>
|
|
{props.desc}
|
|
</Typography>
|
|
</>
|
|
}
|
|
labelPlacement="end"
|
|
sx={{
|
|
alignItems: "flex-start",
|
|
p: theme.spacing(2.5),
|
|
m: theme.spacing(-2.5),
|
|
borderRadius: theme.shape.borderRadius,
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.background.accent,
|
|
},
|
|
"& .MuiButtonBase-root": {
|
|
p: 0,
|
|
mr: theme.spacing(6),
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
Radio.propTypes = {
|
|
title: PropTypes.string.isRequired,
|
|
desc: PropTypes.string,
|
|
size: PropTypes.string,
|
|
};
|
|
|
|
export default Radio;
|