gift: working on UI ans styles

src/pages/EGiftCards/components/ECardList.tsx

@@ -1,14 +1,81 @@
-import { Card, Image } from "antd";
+import { Card, Divider, Image } from "antd";
 import { EGiftCard } from "../type";
+import { useGetEGiftCardsQuery } from "redux/api/others";
+import LoadingSpinner from "components/LoadingSpinner/LoadingSpinner";
+import ProText from "components/ProText";
+import { useTranslation } from "react-i18next";
+import { updateGiftDetails } from "features/order/orderSlice";
+import { useAppDispatch } from "redux/hooks";
+import { useNavigate, useParams } from "react-router-dom";
+
+export default function ECardList() {
+  const dispatch = useAppDispatch();
+  const navigate = useNavigate();
+  const { subdomain } = useParams();
+  const { data: eGiftCards, isLoading } = useGetEGiftCardsQuery();
+  const { t } = useTranslation();
+  console.log(eGiftCards);
+  const handleCardClick = (id: number) => {
+    dispatch(updateGiftDetails({ cardId: id.toString() }));
+    navigate(`/${subdomain}/card-details`);
+  };
+
+  if (isLoading) {
+    return <LoadingSpinner />;
+  }
 
-export default function ECardList({ eGiftCards }: { eGiftCards: EGiftCard[] }) {
   return (
-    <>
-      {eGiftCards.map((card: EGiftCard) => (
-        <Card key={card.id}>
-          <Image src={card.imageURL} alt={card.image} />
-        </Card>
-      ))}
-    </>
+    <Card style={{ textAlign: "center" }}>
+      <div style={{ paddingBottom: 12 }}>
+        <ProText
+          style={{
+            fontSize: 16,
+            fontWeight: 600,
+            color: "#333333",
+          }}
+        >
+          {t("eGiftCards.pickCardForYourGift")}
+        </ProText>
+      </div>
+      <ProText
+        style={{
+          fontFamily: "Outfit",
+          fontWeight: 400,
+          fontStyle: "Regular",
+          fontSize: 14,
+          lineHeight: "140%",
+          letterSpacing: 0,
+          textAlign: "center",
+          color: "#95949C",
+        }}
+      >
+        {t("eGiftCards.chooseDesignToMatchTheOccasion")}
+      </ProText>
+      <Divider style={{ margin: "12px 0 16px 0" }} />
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          padding: "8px",
+        }}
+      >
+        {eGiftCards?.map((card: EGiftCard) => (
+          <Image
+            src={card.imageURL}
+            alt={card.image}
+            width={135}
+            height={88}
+            preview={false}
+            onClick={() => handleCardClick(card.id)}
+            style={{
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              borderRadius: 8,
+            }}
+          />
+        ))}
+      </div>
+    </Card>
   );
 }