Initial commit

src/pages/order/page.tsx

@@ -0,0 +1,162 @@
+import { Button, Card, Divider } from "antd";
+import Ads2 from "components/Ads/Ads2";
+import { CancelOrderBottomSheet } from "components/CustomBottomSheet/CancelOrderBottomSheet";
+import Fascano50X50Icon from "components/Icons/fascano/Fascano50X50Icon";
+import LocationIcon from "components/Icons/LocationIcon";
+import InvoiceIcon from "components/Icons/order/InvoiceIcon";
+import TimeIcon from "components/Icons/order/TimeIcon";
+import OrderDishIcon from "components/Icons/OrderDishIcon";
+import PaymentDetails from "components/PaymentDetails/PaymentDetails";
+import ProHeader from "components/ProHeader/ProHeader";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProText from "components/ProText";
+import ProTitle from "components/ProTitle";
+import { useTranslation } from "react-i18next";
+import Stepper from "./components/Stepper";
+import styles from "./order.module.css";
+
+export default function OrderPage() {
+  const { t } = useTranslation();
+
+  // const subtotal = getTotal();
+  // const tax = subtotal * 0.1; // 10% tax
+  // const total = subtotal + tax;
+
+  return (
+    <>
+      <ProHeader>{t("order.title")}</ProHeader>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "92vh",
+          padding: 16,
+          gap: 16,
+          overflow: "auto",
+          scrollbarWidth: "none",
+        }}
+      >
+        <Card className={styles.orderCard}>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "row",
+              gap: "1rem",
+              backgroundColor: "rgba(255, 183, 0, 0.08)",
+              borderRadius: "12px",
+              padding: 16,
+            }}
+          >
+            <Button
+              type="text"
+              shape="circle"
+              style={{
+                backgroundColor: "rgba(255, 183, 0, 0.08)",
+              }}
+            >
+              <Fascano50X50Icon className={styles.fascanoIcon} />
+            </Button>
+            <div>
+              <ProText style={{ fontSize: "1rem" }}>
+                {t("order.yourOrderFromFascanoRestaurant")}
+              </ProText>
+              <br />
+              <ProText type="secondary">
+                <LocationIcon className={styles.locationIcon} />{" "}
+                {t("order.muscat")}
+              </ProText>
+            </div>
+          </div>
+
+          <OrderDishIcon className={styles.orderDishIcon} />
+
+          <div>
+            <ProTitle
+              level={5}
+              style={{
+                fontWeight: 600,
+                fontSize: "18px",
+                marginBottom: "0.75rem",
+              }}
+            >
+              {t("order.inProgressOrder")} (1)
+            </ProTitle>
+            <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
+              <InvoiceIcon className={styles.invoiceIcon} />
+              <ProText type="secondary" style={{ fontSize: "14px" }}>
+                #A54363
+              </ProText>
+              <TimeIcon className={styles.timeIcon} />
+              <ProText type="secondary" style={{ fontSize: "14px" }}>
+                ordered :- Today - 13:55 PM
+              </ProText>
+            </div>
+
+            <Divider style={{ margin: "12px 0" }} />
+
+            <Stepper />
+          </div>
+        </Card>
+
+        <Ads2 />
+
+        <ProInputCard
+          title={
+            <div style={{ marginBottom: 7 }}>
+              <ProText style={{ fontSize: "1rem" }}>
+                {t("order.yourOrderFrom")}
+              </ProText>
+              <br />
+              <ProText type="secondary">
+                <LocationIcon className={styles.locationIcon} />{" "}
+                {t("order.muscat")}
+              </ProText>
+            </div>
+          }
+        >
+          <div
+            style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
+          >
+            {[
+              { id: 1, name: "Lazord Grill - half kilo" },
+              { id: 2, name: "Lazord Grill - half kilo" },
+              { id: 3, name: "Lazord Grill - half kilo" },
+            ].map((item, index) => (
+              <div key={item.id}>
+                <div
+                  style={{
+                    display: "flex",
+                    flexDirection: "row",
+                    justifyContent: "flex-start",
+                    gap: "1rem",
+                  }}
+                >
+                  <Button
+                    type="text"
+                    shape="circle"
+                    style={{
+                      backgroundColor: "rgba(255, 183, 0, 0.08)",
+                    }}
+                  >
+                    {index + 1}X
+                  </Button>
+                  <div>
+                    <ProText
+                      style={{ fontSize: "1rem", position: "relative", top: 8 }}
+                    >
+                      {item.name}
+                    </ProText>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </ProInputCard>
+
+        <PaymentDetails />
+
+        <CancelOrderBottomSheet />
+      </div>
+    </>
+  );
+}