131 lines
4.0 KiB
TypeScript
131 lines
4.0 KiB
TypeScript
import { Button, Card, Divider, Radio, RadioChangeEvent, Space } from "antd";
|
|
import ProText from "components/ProText";
|
|
import styles from "./CarRatioGroups.module.css";
|
|
import { useTranslation } from "react-i18next";
|
|
import CarIcon from "components/Icons/CarIcon";
|
|
|
|
interface CarRatioGroupsProps {
|
|
options: { label: string; value: string; price?: string }[];
|
|
onRatioClick?: (value: string) => void;
|
|
onChange?: (e: RadioChangeEvent) => void;
|
|
value?: string;
|
|
optionsStyle?: React.CSSProperties;
|
|
valueStyle?: React.CSSProperties;
|
|
showDivider?: boolean;
|
|
}
|
|
|
|
const CarRatioGroups = ({
|
|
options,
|
|
onRatioClick,
|
|
onChange,
|
|
value,
|
|
optionsStyle,
|
|
valueStyle,
|
|
showDivider = false,
|
|
...props
|
|
}: CarRatioGroupsProps) => {
|
|
const handleChange = (e: RadioChangeEvent) => {
|
|
// If onChange is provided (from Form.Item), use it
|
|
if (onChange) {
|
|
onChange(e);
|
|
}
|
|
// Also call onRatioClick if provided (for backward compatibility)
|
|
if (onRatioClick) {
|
|
onRatioClick(e.target.value);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={styles.proRatioGroups}>
|
|
<Radio.Group
|
|
style={{
|
|
width: "100%",
|
|
}}
|
|
value={value}
|
|
onChange={handleChange}
|
|
{...props}
|
|
>
|
|
<Space orientation="vertical" style={{ width: "100%", gap: 16 }}>
|
|
{options.map((option) => (
|
|
<>
|
|
<Radio
|
|
key={option.value}
|
|
value={option.value}
|
|
className={styles.circleCheckbox}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "row",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<div
|
|
style={{ display: "flex", flexDirection: "row", gap: 12 }}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 4,
|
|
width: "100%",
|
|
justifyContent: "center",
|
|
textAlign: "left",
|
|
}}
|
|
>
|
|
<ProText
|
|
style={{
|
|
fontWeight: 500,
|
|
fontStyle: "Medium",
|
|
fontSize: 12,
|
|
lineHeight: "140%",
|
|
color: "#333333",
|
|
}}
|
|
>
|
|
Optima
|
|
</ProText>
|
|
|
|
<ProText
|
|
style={{
|
|
fontWeight: 400,
|
|
fontStyle: "Regular",
|
|
fontSize: 12,
|
|
lineHeight: "140%",
|
|
color: "#777580",
|
|
}}
|
|
>
|
|
42322, blue
|
|
</ProText>
|
|
</div>
|
|
</div>
|
|
|
|
<Button
|
|
shape="circle"
|
|
icon={<CarIcon />}
|
|
style={{
|
|
backgroundColor: "var(--background)",
|
|
border: "none",
|
|
width: 32,
|
|
height: 32,
|
|
minWidth: 32,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
boxShadow: "0 0 10px 0 rgba(0, 0, 0, 0.1)",
|
|
}}
|
|
/>
|
|
</div>
|
|
</Radio>
|
|
{showDivider && options.length !== options.length - 1 && (
|
|
<Divider style={{ margin: "0 0 16px 0 " }} />
|
|
)}
|
|
</>
|
|
))}
|
|
</Space>
|
|
</Radio.Group>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CarRatioGroups;
|