add first open time for appo item and change component data, remove work time in location, add loading on links in page doctor list, fix bug search city and state in clinics page

app/component/openLocation/Content.js

@@ -1,22 +1,44 @@
 import CloseModalD from "@/components/icons/CloseModalD";
 import Image from "next/image";
 
-const maps = [
-  { src: "/assets/images/snapp.png", name: "snapp" },
-  { src: "/assets/images/tapsi.png", name: "tapsi" },
-  { src: "/assets/images/maps.png", name: "maps" },
-  { src: "/assets/images/balad.png", name: "balad" },
-  { src: "/assets/images/waze.png", name: "waze" },
-];
+function Content({ data, onClose }) {
+  const { latitude, longitude } = data && data.map;
+
+  const maps = [
+    {
+      src: "/assets/images/snapp.png",
+      name: "snapp",
+      url: `https://snapp.ir/route?lat=${latitude}&lng=${longitude}`,
+    },
+    {
+      src: "/assets/images/tapsi.png",
+      name: "tapsi",
+      url: `https://tapsi.ir/route?lat=${latitude}&lng=${longitude}`,
+    },
+    {
+      src: "/assets/images/maps.png",
+      name: "maps",
+      url: `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`,
+    },
+    {
+      src: "/assets/images/balad.png",
+      name: "balad",
+      url: `https://balad.ir/map?lat=${latitude}&lng=${longitude}`,
+    },
+    {
+      src: "/assets/images/waze.png",
+      name: "waze",
+      url: `https://waze.com/ul?ll=${latitude},${longitude}&navigate=yes`,
+    },
+  ];
 
-function Content({ handleClose }) {
   return (
     <>
       <div className="flex items-center justify-between">
         <p className="text-[#3B3B3B] text-[14px] sm:text-[16px] md:text-[18px] lg:text-[20px] font-medium">
           باز شدن با
         </p>
-        <div className="cursor-pointer" onClick={handleClose}>
+        <div className="cursor-pointer" onClick={onClose}>
           <CloseModalD />
         </div>
       </div>
@@ -27,20 +49,22 @@ function Content({ handleClose }) {
             key={idx}
             className="flex items-center flex-col justify-center gap-1"
           >
-            <Image
-              className="
-                w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]
-                min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px]
-                max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px]
-              "
-              src={item.src}
-              alt="icon app"
-              height={40}
-              width={40}
-            />
-            <p className="text-[#3B3B3B] font-normal text-[14px]">
-              {item.name}
-            </p>
+            <a href={item.url} target="_blank" rel="noopener noreferrer">
+              <Image
+                className="
+                  w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]
+                  min-w-[32px] min-h-[32px] lg:min-w-[40px] lg:min-h-[40px]
+                  max-w-[32px] max-h-[32px] lg:max-w-[40px] lg:max-h-[40px]
+                "
+                src={item.src}
+                alt="icon app"
+                height={40}
+                width={40}
+              />
+              <p className="text-[#3B3B3B] font-normal text-[14px]">
+                {item.name}
+              </p>
+            </a>
           </li>
         ))}
       </ul>

app/component/openLocation/index.js

@@ -4,7 +4,7 @@ import { Drawer, Modal } from "@mui/material";
 import { styleDefault } from "@/mui";
 import Content from "./Content";
 
-function ModalOpenLocation({ open, setOpen, handleClose, children }) {
+function ModalOpenLocation({ open, data, setOpen, handleClose, children }) {
   const toggleDrawer = (newOpen) => () => {
     setOpen(newOpen);
   };
@@ -19,7 +19,7 @@ function ModalOpenLocation({ open, setOpen, handleClose, children }) {
           style={styleDefault}
           className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden"
         >
-          <Content onClose={handleClose} />
+          <Content data={data} onClose={handleClose} />
         </div>
       </Modal>
       <Drawer
@@ -35,7 +35,7 @@ function ModalOpenLocation({ open, setOpen, handleClose, children }) {
         }}
       >
         <div className="!pt-[12px] !pb-[28px] !px-[24px] !bg-[#FAFAFA] !rounded-[8px] !overflow-hidden !shadow-[0px_1px_24.8px_0px_rgba(155,_155,_155,_0.27)]">
-          <Content handleClose={handleClose} />
+          <Content data={data} handleClose={handleClose} />
         </div>
       </Drawer>
     </>