Initial commit

src/components/LoyaltyCard/LoyaltyCard.tsx

@@ -0,0 +1,77 @@
+import { Button, Card, Col, Row } from "antd";
+import LoyaltyIcon from "components/Icons/cart/LoyaltyIcons";
+import PresentIcon from "components/Icons/cart/PresentIcon";
+import { useTranslation } from "react-i18next";
+import { colors } from "../../ThemeConstants";
+import ProText from "../ProText";
+import styles from "./LoyaltyCard.module.css";
+
+const LoyaltyCard = () => {
+  const { t } = useTranslation();
+  return (
+    <div className={styles.loyaltyContainer}>
+      <Card className={styles.loyaltyCard}>
+        <Row
+          justify="space-between"
+          align="middle"
+          style={{ marginBottom: "0.5rem" }}
+        >
+          <Col>
+            <Row align="middle" gutter={[8, 8]}>
+              <Col>
+                <LoyaltyIcon className={styles.loyaltyIcon} />
+              </Col>
+              <Col>
+                <ProText style={{ fontSize: "1rem", fontWeight: 400 }}>
+                  {t("menu.loyaltyPoints")}
+                </ProText>
+              </Col>
+            </Row>
+            <ProText
+              type="secondary"
+              strong
+              style={{
+                fontSize: "14px",
+                fontWeight: 700,
+                position: "relative",
+                top: -2,
+              }}
+            >
+              {t("menu.loyaltyDescription")}
+            </ProText>
+          </Col>
+          <Col>
+            <PresentIcon />
+          </Col>
+        </Row>
+        <Row justify="space-between" align="middle">
+          <Col>
+            <div className={styles.presentIcon}>
+              <div style={{ display: "flex" }}>
+                {["#006347", "#e23000", "#006d34", "#006db7", "#e40000"].map(
+                  (color) => (
+                    <div key={color} className={styles.presentIconItem} />
+                  )
+                )}
+              </div>
+            </div>
+          </Col>
+          <Col>
+            <Button
+              style={{
+                backgroundColor: colors.primary,
+                color: "white",
+                border: 0,
+                height: 32,
+              }}
+            >
+              {t("menu.claim")}
+            </Button>
+          </Col>
+        </Row>
+      </Card>
+    </div>
+  );
+};
+
+export default LoyaltyCard;