89 lines
1.8 KiB
TypeScript
89 lines
1.8 KiB
TypeScript
import Radio from "@mui/material/Radio";
|
|
import type { RadioProps } from "@mui/material/Radio";
|
|
import { useTheme } from "@mui/material/styles";
|
|
import { Circle, CircleDot } from "lucide-react";
|
|
import FormControlLabel from "@mui/material/FormControlLabel";
|
|
import Typography from "@mui/material/Typography";
|
|
|
|
interface RadioInputProps extends RadioProps {}
|
|
|
|
export const RadioInput = ({ ...props }: RadioInputProps) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<Radio
|
|
{...props}
|
|
icon={
|
|
<Circle
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
/>
|
|
}
|
|
checkedIcon={
|
|
<CircleDot
|
|
size={14}
|
|
strokeWidth={1.5}
|
|
/>
|
|
}
|
|
sx={{
|
|
padding: 0,
|
|
mt: theme.spacing(0.5),
|
|
color: theme.palette.text.secondary,
|
|
"&.Mui-checked": {
|
|
color: theme.palette.primary.main,
|
|
"& svg circle": {
|
|
fill: theme.palette.primary.main,
|
|
},
|
|
},
|
|
"& .MuiSvgIcon-root": {
|
|
fontSize: 16,
|
|
},
|
|
"& svg": {
|
|
stroke: "currentColor",
|
|
},
|
|
"& svg path, & svg line, & svg polyline, & svg rect, & svg circle": {
|
|
stroke: "currentColor",
|
|
fill: "none",
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export const RadioWithDescription = ({
|
|
label,
|
|
description,
|
|
...props
|
|
}: RadioInputProps & { label: string; description: string }) => {
|
|
const theme = useTheme();
|
|
return (
|
|
<FormControlLabel
|
|
control={<RadioInput {...props} />}
|
|
label={
|
|
<>
|
|
<Typography component="p">{label}</Typography>
|
|
<Typography
|
|
component="h6"
|
|
color={theme.palette.text.secondary}
|
|
>
|
|
{description}
|
|
</Typography>
|
|
</>
|
|
}
|
|
sx={{
|
|
alignItems: "flex-start",
|
|
p: theme.spacing(2.5),
|
|
m: theme.spacing(-2.5),
|
|
borderRadius: theme.shape.borderRadius,
|
|
|
|
"&:hover": {
|
|
backgroundColor: theme.palette.background.paper,
|
|
},
|
|
"& .MuiButtonBase-root": {
|
|
p: 0,
|
|
mr: theme.spacing(6),
|
|
},
|
|
}}
|
|
/>
|
|
);
|
|
};
|