67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import { Divider } from "antd";
|
|
import ProCheckboxGroups from "components/ProCheckboxGroups/ProCheckboxGroups";
|
|
import ProText from "components/ProText";
|
|
import { Dispatch, SetStateAction } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Extra as ExtraType } from "utils/types/appTypes";
|
|
import styles from "../product.module.css";
|
|
|
|
export default function Extra({
|
|
extrasList,
|
|
selectedExtras,
|
|
setSelectedExtras,
|
|
}: {
|
|
extrasList: ExtraType[];
|
|
selectedExtras: ExtraType[];
|
|
setSelectedExtras: Dispatch<SetStateAction<ExtraType[]>>;
|
|
}) {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<>
|
|
{extrasList.length > 0 && (
|
|
<div>
|
|
<Divider style={{ margin: "0 0 16px 0" }} />
|
|
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<ProText style={{ fontSize: "1.25rem" }}>
|
|
{t("menu.youMightAlsoLike")}
|
|
</ProText>
|
|
|
|
<ProText strong style={{ fontSize: "0.75rem" }}>
|
|
{t("menu.optional")}
|
|
</ProText>
|
|
</div>
|
|
|
|
<ProText strong style={{ fontSize: "0.75rem" }}>
|
|
{t("menu.choose1")}
|
|
</ProText>
|
|
|
|
<div className={styles.productContainer}>
|
|
<ProCheckboxGroups
|
|
options={extrasList.map((value) => {
|
|
return {
|
|
value: value.id.toString(),
|
|
label: value.name,
|
|
price: `+${value.price}`,
|
|
};
|
|
})}
|
|
value={selectedExtras.map((ex) => ex.id.toString())}
|
|
onChange={(values) =>
|
|
setSelectedExtras(
|
|
extrasList.filter((o) => values?.includes(o.id.toString())),
|
|
)
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|