zerosoul
92 lines
2.3 KiB
JavaScript
92 lines
2.3 KiB
JavaScript
import { useRef, useState } from "react";
|
|
import styled from "styled-components";
|
|
import { nanoid } from "@reduxjs/toolkit";
|
|
|
|
const StyledForm = styled.form`
|
|
> .option {
|
|
&:not(:last-child) {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
> input[type="radio"] {
|
|
display: none;
|
|
|
|
& + .box {
|
|
width: 512px;
|
|
background: #ffffff;
|
|
border: 1px solid #d0d5dd;
|
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
|
|
border-radius: 8px;
|
|
transition: all ease-in-out 250ms;
|
|
|
|
& > label {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 24px;
|
|
color: #667085;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
transition: all ease-in-out 250ms;
|
|
|
|
&:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 8px;
|
|
background: #ffffff;
|
|
box-shadow: inset 0 0 0 4px #ffffff;
|
|
border: 1px solid #d0d5dd;
|
|
margin: 14px 8px 14px 14px;
|
|
transition: all ease-in-out 500ms;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:checked + .box {
|
|
background: #22ccee;
|
|
border: 1px solid #d0d5dd;
|
|
|
|
& > label {
|
|
color: #ffffff;
|
|
|
|
&:before {
|
|
background: #ffffff;
|
|
box-shadow: inset 0 0 0 4px #22ccee;
|
|
border: 1px solid #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
`;
|
|
|
|
export default function Radio({ options, value = undefined, onChange = undefined }) {
|
|
const [innerValue, setInnerValue] = useState(0);
|
|
const id = useRef(nanoid());
|
|
|
|
return (
|
|
<StyledForm>
|
|
{options.map((item, index) => (
|
|
<div className="option" key={index}>
|
|
<input
|
|
type="radio"
|
|
checked={(value !== undefined ? value : innerValue) === index}
|
|
onChange={() => {
|
|
value === undefined && setInnerValue(index);
|
|
onChange !== null && onChange(index);
|
|
}}
|
|
id={`${id.current}-${index}`}
|
|
/>
|
|
<div className="box">
|
|
<label htmlFor={`${id.current}-${index}`}>{item}</label>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</StyledForm>
|
|
);
|
|
}
|