74 lines
2.2 KiB
JavaScript
74 lines
2.2 KiB
JavaScript
import { CircleFill, Circle } from "react-bootstrap-icons";
|
|
import "../styles/radio.scss";
|
|
|
|
const Radio = (props) => {
|
|
console.log("hello");
|
|
const {
|
|
name,
|
|
description,
|
|
onClick,
|
|
value,
|
|
price,
|
|
disabled,
|
|
activeRadioOption,
|
|
details,
|
|
} = props;
|
|
const classCheckbox = "checkbox";
|
|
const classOption = "option";
|
|
console.log("value, activeRadioOption", value, activeRadioOption);
|
|
return (
|
|
<div>
|
|
<div
|
|
className="radio-option-container"
|
|
key={name}
|
|
onClick={() => !disabled && onClick && onClick(value)}
|
|
>
|
|
{value == activeRadioOption ? (
|
|
<>
|
|
<div className="radio-circle-container">
|
|
<div className="radio-circle-top">
|
|
<div className="radio-circle-box">
|
|
<CircleFill color="#1a76c7" size="20px" />
|
|
</div>
|
|
<div className="radio-name-box"> {`${name}`} </div>
|
|
<div className="radio-price-box">
|
|
<div className="radio-price"> {`${price}`} </div>
|
|
</div>
|
|
</div>
|
|
|
|
<div></div>
|
|
<div className="radio-circle-lower">
|
|
<div className="radio-description-box">
|
|
{" "}
|
|
{`${description}`}{" "}
|
|
</div>
|
|
<div className="radio-description-box">{`${details}`} </div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="radio-circle-container">
|
|
<div className="radio-circle-top">
|
|
<div className="radio-circle-box">
|
|
<Circle color="#1a76c7" size="20px" />
|
|
</div>
|
|
<div className="radio-name-box">{`${name}`} </div>
|
|
<div className="radio-price-box">
|
|
<div className="radio-price"> {`${price}`} </div>
|
|
</div>
|
|
</div>
|
|
<div className="radio-circle-lower">
|
|
<div className="radio-description-box">{`${description}`} </div>
|
|
<div className="radio-description-box">{`${details}`} </div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Radio;
|