gift: working on UI ans styles

src/pages/CardDetails/components/SenderformationCard/SenderformationCard.tsx

@@ -0,0 +1,55 @@
+import ProInputCard from "components/ProInputCard/ProInputCard.tsx";
+import ProPhoneInput from "components/ProPhoneInput";
+import { selectCart, updateGiftDetails } from "features/order/orderSlice";
+import { useTranslation } from "react-i18next";
+import { useAppDispatch, useAppSelector } from "redux/hooks";
+import { Checkbox, Form, Input } from "antd";
+import styles from "./SenderformationCard.module.css";
+import TextArea from "antd/es/input/TextArea";
+import ProText from "components/ProText";
+
+export default function SenderformationCard() {
+  const { t } = useTranslation();
+  const dispatch = useAppDispatch();
+  const { giftDetails } = useAppSelector(selectCart);
+
+  return (
+    <ProInputCard title={t("cardDetails.receiverInformation")}>
+      <div className={styles.customerInformationCard}>
+        <Form.Item name="receiverName">
+          <Input
+            placeholder={t("cardDetails.yourName")}
+            size="large"
+            autoFocus={false}
+            style={{ padding: "7px 11px", height: 48, borderRadius: 888 }}
+            value={giftDetails?.senderName}
+            onChange={(e) => {
+              dispatch(updateGiftDetails({ senderName: e.target.value }));
+            }}
+          />
+        </Form.Item>
+        <ProPhoneInput
+          propName="yourPhone"
+          value={giftDetails?.senderPhone}
+          onChange={(e) => {
+            dispatch(updateGiftDetails({ senderPhone: e }));
+          }}
+        />
+        <Form.Item name="isSecret" colon={false}>
+          <Checkbox
+            style={{
+              fontSize: 14,
+            }}
+            autoFocus={false}
+            checked={giftDetails?.isSecret}
+            onChange={(e) => {
+              dispatch(updateGiftDetails({ isSecret: e.target.checked }));
+            }}
+          >
+            <ProText>{t("cardDetails.keepMyNameSecret")}</ProText>
+          </Checkbox>
+        </Form.Item>
+      </div>
+    </ProInputCard>
+  );
+}