update design page doctor item & design page account & success and failed pay

components/account/information/payment/FailedPay.js

@@ -1,6 +1,34 @@
-function FailedPay() {
+import InfoCircleRedA from "@/components/icons/InfoCircleRedA"
+import RedoA from "@/components/icons/RedoA"
+import RefreshA from "@/components/icons/RefreshA"
+import { Button } from "@mui/material"
+
+function FailedPay({ setTypePay, setIsPay, fadeElement }) {
     return (
-        <div>FailedPay</div>
+        <div className="mt-[7px]">
+            <div className="flex flex-col justify-center items-center gap-[14px]">
+                <InfoCircleRedA />
+                <p className="text-[#D32F2F] text-[20px] font-bold">پرداخت شما انجام نشد.</p>
+            </div>
+            <div className="flex mt-[24px] items-center justify-center gap-[24px]">
+                <Button
+                    variant="outlined"
+                    onClick={() => fadeElement(() => setIsPay(false))}
+                    className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
+                >
+                    <RedoA />
+                    <p className="text-[#5559CE] text-[16px] font-medium">صفحه اصلی</p>
+                </Button>
+                <Button
+                    variant="contained"
+                    onClick={() => fadeElement(() => setTypePay('default'))}
+                    className="!flex !rounded-[8px] !items-center !p-2 !justify-center !gap-[4px]"
+                >
+                    <RefreshA />
+                    <p className="text-[#FAFAFA] text-[16px] font-medium">تلاش دوباره</p>
+                </Button>
+            </div>
+        </div>
     )
 }