change design all page & component page booking and account & cleancode

2024-09-01 20:43:53 +03:30
parent 2afd79b84d
commit bb154ac63f
46 changed files with 685 additions and 523 deletions
@@ -0,0 +1,15 @@
+import React from 'react'
+
+function ButtonFixed({ children }) {
+    return (
+        <div
+            className="!fixed md:!relative !bottom-0 !right-0 bg-[#FFF] border-0 border-t 
+        md:border-t-transparent border-[#D7D7D7] z-10
+        !w-full sm:!w-full !p-[16px] sm:!px-[52px] md:!ml-0 md:!p-0 md:!w-full"
+        >
+            {children}
+        </div>
+    )
+}
+
+export default ButtonFixed
@@ -0,0 +1,38 @@
+import ArrowLeftB from '@/components/icons/ArrowLeftB';
+import { Button } from '@mui/material';
+import ButtonFixed from './ButtonFixed';
+
+function Paying({ setTypePay, fadeElement, setStep }) {
+    return (
+        <div className='w-full lg:w-[59%]'>
+            <div
+                className={`opacity-page bg-[#FFF] border border-solid border-[#EFEFEF] 
+                rounded-[8px] p-[12px] sm:p-[16px] md:p-[20px] lg:p-[24px]`}
+            >
+                <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-bold">
+                    اطلاعات پرداخت
+                </p>
+                <div className='flex justify-between items-center mt-[12px] sm:mt-[18px] md:mt-[24px] lg:mt-[30px]'>
+                    <p className='text-[#616161] text-[14px] md:text-[16px] font-medium'>مبلغ پیش پرداخت (بیعانه) : </p>
+                    <p className='text-[#525252] text-[14px] md:text-[16px] font-bold'>20،000 تومان</p>
+                </div>
+                <span className='bg-[#D7D7D7] hidden md:block h-px w-full mt-[32px] mb-[25px]'></span>
+                <ButtonFixed>
+                    <div className='flex items-center justify-between gap-2'>
+                        <p className='text-[#616161] md:text-[#3B3B3B] text-[14px] md:text-[16px] font-bold'>مبلغ قابل پرداخت : 20،000 تومان</p>
+                        <Button
+                            className='!gap-[4px] !mr-auto !flex !px-[12px] !p-[7px] md:!py-[9px] !min-w-[157px]'
+                            onClick={() => setStep(prev => prev + 1)}
+                            variant="contained"
+                        >
+                            <p className="text-[#EFEFEF] text-[16px] font-medium">پرداخت نهایی</p>
+                            <ArrowLeftB />
+                        </Button>
+                    </div>
+                </ButtonFixed>
+            </div>
+        </div>
+    )
+}
+
+export default Paying