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

2024-08-28 03:14:42 +03:30
parent 7925493681
commit 6384dd10b6
20 changed files with 1106 additions and 56 deletions
@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from 'react';
+import { Button } from '@mui/material';
+import ArrowBottomGrayD from '@/components/icons/ArrowBottomGrayD';
+
+function Item({ data }) {
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <>
+            <a
+                id="location"
+                className='absolute -translate-y-[148px] sm:-translate-y-[157px] md:-translate-y-[166px] lg:-translate-y-[176px]'
+            ></a>
+            <Button
+                variant='texts'
+                onClick={() => setIsOpen(!isOpen)}
+                className="!px-[2px] !py-[4px] !flex !items-center !justify-between !w-full"
+            >
+                <p className="text-[#616161] text-[16px] font-medium">{data.title}</p>
+                <div
+                    className={`
+                        transition-all duration-500
+                        ${isOpen ?
+                            'rotate-180' :
+                            'rotate-0'}
+                    `}
+                >
+                    <ArrowBottomGrayD />
+                </div>
+            </Button>
+            <div
+                className={`
+                    overflow-hidden transition-all duration-500
+                    ${isOpen ?
+                        'max-h-screen ' :
+                        'max-h-0'}
+                `}
+            >
+                <div className="gap-4 flex flex-col items-start mt-[24px]">
+                    <p className="text-[#525252] text-[16px] font-normal">آدرس: {data.address}</p>
+                    <p className="text-[#525252] text-[16px] font-normal">تلفن: {data.phone}</p>
+                    <p className="text-[#525252] text-[16px] font-normal">روزهای کاری: {data.working_days}</p>
+                </div>
+                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d99748.77423686371!2d2.264635095144491!3d48.85882549249809!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e66e1f06e2b70f%3A0x40b82c3688c9460!2sParis%2C%20France!5e1!3m2!1sen!2snl!4v1724802057795!5m2!1sen!2snl"
+                    className='w-full h-[470px] rounded-lg mt-4'
+                    allowFullScreen=""
+                    loading="lazy"
+                    referrerPolicy="no-referrer-when-downgrade"
+                ></iframe>
+            </div>
+        </>
+    )
+}
+
+export default Item