Initial commit

src/pages/product/components/Extra.tsx

@@ -0,0 +1,62 @@
+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: string[];
+  setSelectedExtras: Dispatch<SetStateAction<string[]>>;
+}) {
+  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}
+              onChange={(values: string[]) => setSelectedExtras(values)}
+            />
+          </div>
+        </div>
+      )}
+    </>
+  );
+}