redeem: initial commit

src/pages/redeem/components/LocationCard.tsx

@@ -0,0 +1,94 @@
+import { Divider, Tag } from "antd";
+import ProInputCard from "components/ProInputCard/ProInputCard";
+import ProText from "components/ProText";
+import { selectCart } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppSelector } from "redux/hooks";
+import styles from "./LocationCard.module.css";
+import { GoogleMap } from "components/CustomBottomSheet/GoogleMap";
+import DirectionsIcon from "components/Icons/DirectionsIcon";
+
+export function LocationCard() {
+  const { t } = useTranslation();
+  const { restaurant } = useAppSelector(selectCart);
+
+  return (
+    <>
+      <ProInputCard title={t("redeem.restaurantLocation")}>
+        <div className={styles.mapContainer}>
+          <GoogleMap
+            readOnly={true}
+            initialLocation={{
+              lat: parseFloat(restaurant.lat || "0"),
+              lng: parseFloat(restaurant.lng || "0"),
+              address: "",
+            }}
+            height="160px"
+          />
+        </div>
+
+        <Divider style={{ margin: "16px 0" }} />
+
+        <div className={styles.orderNotes}>
+          <div
+            style={{
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              width: "100%",
+            }}
+          >
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#333333",
+              }}
+            >
+              {restaurant.restautantName}
+            </ProText>
+
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#777580",
+              }}
+            >
+              {restaurant.address}
+            </ProText>
+          </div>
+          <Tag
+            style={{
+              backgroundColor: "#FFF9E6",
+              color: "#E8B400",
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+            }}
+          >
+            <DirectionsIcon />
+            <ProText
+              style={{
+                fontWeight: 500,
+                fontStyle: "Medium",
+                fontSize: 14,
+                lineHeight: "140%",
+                letterSpacing: "0%",
+                color: "#E8B400",
+              }}
+            >
+              {t("redeem.getDirections")}
+            </ProText>
+          </Tag>
+        </div>
+      </ProInputCard>
+    </>
+  );
+}