cart refactor code

src/pages/cart/components/TableNumberCard.tsx

@@ -0,0 +1,56 @@
+import styles from "pages/cart/cart.module.css";
+import ProInModalMultiSelect from "components/ProSelect/ProInModalMultiSelect.tsx";
+import {
+  updateTables,
+  removeTable,
+  selectCart,
+} from "features/order/orderSlice.ts";
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import { useAppSelector } from "redux/hooks.ts";
+import { useTranslation } from "react-i18next";
+import i18n from "i18n/i18n.ts";
+
+// Function to get translated table names
+export const getTableOptions = () => [
+  { id: "1", name: i18n.t("table1") },
+  { id: "2", name: i18n.t("table2") },
+  { id: "3", name: i18n.t("table3") },
+  { id: "4", name: i18n.t("table4") },
+  { id: "5", name: i18n.t("table5") },
+  { id: "6", name: i18n.t("table6") },
+  { id: "7", name: i18n.t("table7") },
+  { id: "8", name: i18n.t("table8") },
+  { id: "9", name: i18n.t("table9") },
+  { id: "10", name: i18n.t("table10") },
+];
+
+export default function TableNumberCard() {
+  const { t } = useTranslation();
+  const { tables } = useAppSelector(selectCart);
+  return (
+    <>
+      <ProInputCard
+        title={t("cart.tableNumber")}
+        className={styles.tableNumberCard}
+      >
+        <ProInModalMultiSelect
+          value={tables}
+          placeholder={t("tableNumber")}
+          size="large"
+          optionList={getTableOptions()}
+          style={{
+            width: "100%",
+            height: 50,
+            fontSize: 12,
+          }}
+          onSelect={(value) => {
+            updateTables(value);
+          }}
+          onClear={() => {
+            removeTable();
+          }}
+        />
+      </ProInputCard>
+    </>
+  );
+}