change data blog item and clinic item & change pages clinic and clinic to ssr & remove loading & handle pagination page clinics

app/blog/[slug]/page.js

@@ -1,13 +1,21 @@
+import axios from "axios";
 import BlogPage from "@/components/blog";
 import articles from "@/data/articles.json";
 import Layout from "@/components/layout/StLayout";
 
-function Blog({ params: { slug } }) {
-  const article = articles.find((item) => item.id === +slug);
+async function Blog({ params: { slug } }) {
+  const blog = await axios.get(
+    `https://back-dev.clinic-pro.ir/api/v1/blog/${slug}`
+  );
+  const blogs = await axios.get("https://back-dev.clinic-pro.ir/api/v1/blogs");
+
+  const resBlog = blog.data;
+  const resBlogs = blogs.data;
+  console.log(resBlogs);
 
   return (
     <Layout>
-      <BlogPage article={article} articles={articles} />
+      <BlogPage blog={resBlog} blogs={resBlogs} />
     </Layout>
   );
 }

app/blogs/page.js

@@ -1,12 +1,16 @@
 import BlogsPage from "@/components/blogs";
 import Layout from "@/components/layout/StLayout";
+import axios from "axios";
+
+export default async function Blogs() {
+  const response = await axios.get(
+    "https://back-dev.clinic-pro.ir/api/v1/blogs"
+  );
+  const blogs = response.data.blogs;
 
-function Blogs() {
   return (
     <Layout name="/blogs">
-      <BlogsPage />
+      <BlogsPage blogs={blogs} />
     </Layout>
   );
 }
-
-export default Blogs;

app/component/ItemDoctor.js

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { Button, Skeleton } from "@mui/material";
+import { Button } from "@mui/material";
 
 // Icons
 import ArrowLeftD from "@/components/icons/ArrowLeftD";
@@ -11,12 +11,12 @@ import CustomLoading from "./loading/Custom";
 import TextLoading from "./loading/Text";
 import CircularLoading from "./loading/Circular";
 
-function ItemDoctor({ doctor, loading }) {
+function ItemDoctor({ doctor }) {
   return (
     <li className="p-4 relative rounded-lg bg-[#FFF] border border-[#EFEFEF]">
       {/* Detail Doctor */}
       <div className="flex items-center justify-start gap-2.5">
-        <CircularLoading loading={loading} width={66} height={66}>
+        <CircularLoading width={66} height={66}>
           <Image
             width={72}
             height={72}
@@ -26,17 +26,17 @@ function ItemDoctor({ doctor, loading }) {
           />
         </CircularLoading>
         <div className="flex flex-col items-start justify-center gap-2">
-          <TextLoading width={90} height={15} loading={loading}>
+          <TextLoading width={90} height={15}>
             <p className="text-[#3B3B3B] text-[14px] font-bold">
               {doctor.name}
             </p>
           </TextLoading>
-          <TextLoading width={120} height={15} loading={loading}>
+          <TextLoading width={120} height={15}>
             <p className="text-[#616161] text-[14px] font-normal">
               تخصص: {doctor.expertise}
             </p>
           </TextLoading>
-          <CustomLoading width={100} height={25} loading={loading}>
+          <CustomLoading width={100} height={25}>
             <div className="flex rounded items-center justify-start gap-2">
               <div className="p-1 bg-[#F8F8FF] flex items-center rounded-[4px] gap-0.5">
                 <LikeD />
@@ -58,13 +58,13 @@ function ItemDoctor({ doctor, loading }) {
       {/* Hours of work */}
       <div className="flex my-4 items-center justify-start gap-0.5">
         <ClockD />
-        <TextLoading width={150} height={15} loading={loading}>
+        <TextLoading width={150} height={15}>
           <p className="text-[#7E7E7E] text-[12px] font-normal">
             ساعت کاری: {doctor.hours_of_work}
           </p>
         </TextLoading>
       </div>
-      <CustomLoading loading={loading} width={150} height={20}>
+      <CustomLoading width={150} height={20}>
         <p
           className={`text-[12px] font-medium rounded w-fit p-1.5 ml-[52px]
                     ${
@@ -83,9 +83,9 @@ function ItemDoctor({ doctor, loading }) {
         <Button
           variant="contained"
           className={`!p-[14px] !absolute !left-4 !bottom-4  !rounded-full !w-fit 
-                     ${!Number(doctor.active) || (loading && "!bg-[#D7D7D7]")}
+                     ${!Number(doctor.active)}
                     `}
-          disabled={!Number(doctor.active) || loading}
+          disabled={!Number(doctor.active)}
         >
           <ArrowLeftD />
         </Button>

app/component/comment/ItemUser.js

@@ -9,15 +9,7 @@ import DisLikeComment from "@/components/icons/DisLikeComment";
 import ArrowUpComment from "@/components/icons/ArrowUpComment";
 import LikeComment from "@/components/icons/LikeComment";
 
-function ItemUser({
-  update,
-  setUpdate,
-  isReply,
-  list,
-  setList,
-  data,
-  loading,
-}) {
+function ItemUser({ update, setUpdate, isReply, list, setList, data }) {
   const handleLike = (lengthLike, data, nameLike, nameIsLike) => {
     if (nameIsLike === "is_like" && data.is_dislike) {
       data.is_dislike = false;
@@ -34,46 +26,26 @@ function ItemUser({
   return (
     <li className="w-full">
       <div className="flex items-center justify-start gap-2">
-        {loading ? (
-          <Skeleton
-            variant="circular"
-            className="!min-w-[40px] !min-h-[40px]"
-          />
-        ) : (
-          <Image
-            className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
-            src={data.profile}
-            width={40}
-            height={40}
-            alt="profile"
-          />
-        )}
+        <Image
+          className="!w-[32px] !h-[32px] sm:!w-[35px] sm:!h-[35px] md:!h-[37px] md:!w-[37px] lg:!w-[40px] lg:!h-[40px]"
+          src={data.profile}
+          width={40}
+          height={40}
+          alt="profile"
+        />
         <div className="flex flex-col items-start justify-center gap-[8px]">
-          {loading ? (
-            <Skeleton variant="text" className="!min-w-[70px]" />
-          ) : (
-            <>
-              <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
-                {data.name}
-              </p>
-              <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
-                3 روز پیش
-              </p>
-            </>
-          )}
+          <p className="text-[#343A40] text-[14px] md:text-[16px] font-medium">
+            {data.name}
+          </p>
+          <p className="text-[#7E7E7E] text-[12px] md:text-[14px] font-medium">
+            3 روز پیش
+          </p>
         </div>
       </div>
       <div className="mt-2">
-        {loading ? (
-          <>
-            <Skeleton variant="text" className="!w-full !mt-8" />
-            <Skeleton variant="text" className="!w-1/3" />
-          </>
-        ) : (
-          <p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">
-            {data.comment}
-          </p>
-        )}
+        <p className="text-[#495057] text-[12px] md:text-[14px] font-normal leading-[20px] sm:leading-[24px] md:leading-[28px] lg:leading-[30px]">
+          {data.comment}
+        </p>
         <div className="flex items-center justify-start mt-2 gap-[28px]">
           <div className="flex items-center justify-start gap-1">
             <div
@@ -83,19 +55,15 @@ function ItemUser({
                   data.is_like ? data.like - 1 : data.like + 1,
                   data,
                   "like",
-                  "is_like",
+                  "is_like"
                 )
               }
             >
               {data.is_like ? <BoldLikeComment /> : <LikeComment />}
             </div>
-            {loading ? (
-              <Skeleton variant="text" className="!min-w-[8px]" />
-            ) : (
-              <p className="text-[#6C757D] text-[12px] font-normal select-none">
-                {data.like}
-              </p>
-            )}
+            <p className="text-[#6C757D] text-[12px] font-normal select-none">
+              {data.like}
+            </p>
           </div>
           <div className="flex items-center justify-start gap-1">
             <div
@@ -105,19 +73,15 @@ function ItemUser({
                   data.is_dislike ? data.dislike - 1 : data.dislike + 1,
                   data,
                   "dislike",
-                  "is_dislike",
+                  "is_dislike"
                 )
               }
             >
               {data.is_dislike ? <BoldDisLikeComment /> : <DisLikeComment />}
             </div>
-            {loading ? (
-              <Skeleton variant="text" className="!min-w-[8px]" />
-            ) : (
-              <p className="text-[#6C757D] text-[12px] font-normal select-none">
-                {data.dislike}
-              </p>
-            )}
+            <p className="text-[#6C757D] text-[12px] font-normal select-none">
+              {data.dislike}
+            </p>
           </div>
           <Button
             className="!text-[#495057] !text-[12px] !font-medium"
@@ -164,8 +128,7 @@ function ItemUser({
           </div>
         )}
         <ul
-          className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 
-                    ${loading && "w-full"}
+          className={`flex mr-12 flex-col justify-center transition-all duration-500 overflow-hidden items-start gap-12 w-full
                     ${data.is_open_reply ? "max-h-screen mt-12" : "max-h-0"}`}
         >
           {data.replays.map((item, idx) => (
@@ -174,7 +137,6 @@ function ItemUser({
               data={item}
               isReply={true}
               update={update}
-              loading={loading}
               setUpdate={setUpdate}
             />
           ))}

app/component/comment/index.js

@@ -2,7 +2,7 @@
 import { useState } from "react";
 import ItemUser from "./ItemUser";
 
-function Comment({ data, loading }) {
+function Comment({ data }) {
   const [list, setList] = useState(data?.comments);
   const [update, setUpdate] = useState(false);
 
@@ -21,7 +21,6 @@ function Comment({ data, loading }) {
             data={item}
             update={update}
             setList={setList}
-            loading={loading}
             setUpdate={setUpdate}
           />
         ))}

app/component/openLocation/Content.js

@@ -23,9 +23,16 @@ function Content({ handleClose }) {
       <span className="bg-[#EFEFEF] block h-px w-full mt-[12px] mb-[22px]"></span>
       <ul className="flex items-center justify-center gap-[32px] md:gap-[36px] lg:gap-[40px] mx-auto flex-wrap md:flex-nowrap md:mx-[72px]">
         {maps.map((item, idx) => (
-          <li className="flex items-center flex-col justify-center gap-1">
+          <li
+            key={idx}
+            className="flex items-center flex-col justify-center gap-1"
+          >
             <Image
-              className="w-[32px] h-[32px] lg:w-[40px] lg:h-[40px]"
+              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}