add prettier formatter to all file

2024-09-25 11:03:44 +03:30
parent fa38ee2b21
commit eda896e917
410 changed files with 47636 additions and 43842 deletions
@@ -1,47 +1,47 @@
-import CustomLoading from '@/app/component/loading/Custom'
-import MultilineLoading from '@/app/component/loading/Multiline'
-import Image from 'next/image'
-import React from 'react'
+import CustomLoading from "@/app/component/loading/Custom";
+import MultilineLoading from "@/app/component/loading/Multiline";
+import Image from "next/image";
+import React from "react";

 function Caption({ data, loading }) {
-    return (
-        <>
-            <CustomLoading loading={loading} width='full' height={500}>
-                <Image
-                    className="rounded-[8px] overflow-hidden w-full"
-                    src={data.cover_first}
-                    alt="cover-blog"
-                    height={570}
-                    width={808}
-                />
-            </CustomLoading>
-            <div className={loading ? 'my-4' : ''}>
-                <MultilineLoading loading={loading} width='full' height={18} line={20}>
-                    <div
-                        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-                        dangerouslySetInnerHTML={{ __html: data.caption }}
-                    />
-                </MultilineLoading>
-            </div>
-            <CustomLoading loading={loading} width='full' height={500}>
-                <Image
-                    className="rounded-[8px] overflow-hidden w-full"
-                    src={data.cover_second}
-                    alt="cover-blog"
-                    height={570}
-                    width={808}
-                />
-            </CustomLoading>
-            <div className={loading ? 'my-4' : ''}>
-                <MultilineLoading loading={loading} width='full' height={18} line={20}>
-                    <div
-                        className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
-                        dangerouslySetInnerHTML={{ __html: data.caption }}
-                    />
-                </MultilineLoading>
-            </div>
-        </>
-    )
+  return (
+    <>
+      <CustomLoading loading={loading} width="full" height={500}>
+        <Image
+          className="rounded-[8px] overflow-hidden w-full"
+          src={data.cover_first}
+          alt="cover-blog"
+          height={570}
+          width={808}
+        />
+      </CustomLoading>
+      <div className={loading ? "my-4" : ""}>
+        <MultilineLoading loading={loading} width="full" height={18} line={20}>
+          <div
+            className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+            dangerouslySetInnerHTML={{ __html: data.caption }}
+          />
+        </MultilineLoading>
+      </div>
+      <CustomLoading loading={loading} width="full" height={500}>
+        <Image
+          className="rounded-[8px] overflow-hidden w-full"
+          src={data.cover_second}
+          alt="cover-blog"
+          height={570}
+          width={808}
+        />
+      </CustomLoading>
+      <div className={loading ? "my-4" : ""}>
+        <MultilineLoading loading={loading} width="full" height={18} line={20}>
+          <div
+            className="my-[12px] sm:my-[16px] md:my-[20px] lg:my-[24px] text-[#525252] text-[14px] md:text-[15px] lg:text-[16px] font-normal leading-[26px] sm:leading-[28px] md:leading-[30px] lg:leading-[32px]"
+            dangerouslySetInnerHTML={{ __html: data.caption }}
+          />
+        </MultilineLoading>
+      </div>
+    </>
+  );
 }

-export default Caption
+export default Caption;
@@ -1,30 +1,26 @@
-import CircularLoading from "@/app/component/loading/Circular"
-import LinkedinB from "@/components/icons/LinkedinB"
-import TelegramB from "@/components/icons/TelegramB"
-import WhatsappB from "@/components/icons/WhatsappB"
+import CircularLoading from "@/app/component/loading/Circular";
+import LinkedinB from "@/components/icons/LinkedinB";
+import TelegramB from "@/components/icons/TelegramB";
+import WhatsappB from "@/components/icons/WhatsappB";

-const socials = [
-    <WhatsappB />,
-    <TelegramB />,
-    <LinkedinB />
-]
+const socials = [<WhatsappB />, <TelegramB />, <LinkedinB />];

 function SocialMedia({ loading }) {
-    return (
-        <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
-            {socials.map((item, idx) => (
-                <CircularLoading width={36} height={36} loading={loading}>
-                    <li
-                        key={idx}
-                        className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
-                    >
-                        {item}
-                    </li>
-                </CircularLoading>
-            ))}
-            <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
-        </ul>
-    )
+  return (
+    <ul className="flex mt-0 sm:mt-[3px] md:mt-[6px] lg:mt-[8px] pb-[16px] sm:pb-[21px] md:pb-[27px] lg:pb-[32px] relative items-center justify-end gap-4">
+      {socials.map((item, idx) => (
+        <CircularLoading width={36} height={36} loading={loading}>
+          <li
+            key={idx}
+            className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
+          >
+            {item}
+          </li>
+        </CircularLoading>
+      ))}
+      <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
+    </ul>
+  );
 }

-export default SocialMedia
+export default SocialMedia;
@@ -1,19 +1,21 @@
-import { Button } from '@mui/material'
-import React from 'react'
+import { Button } from "@mui/material";
+import React from "react";

 function AddComment() {
-    return (
-        <div className='flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]'>
-            <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را به اشتراک بگذارید:</p>
-            <Button
-                variant='outlined'
-                className='!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] 
-                !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]'
-            >
-                ثبت نظر
-            </Button>
-        </div>
-    )
+  return (
+    <div className="flex flex-col md:flex-row gap-y-[12px] items-start md:items-center justify-start gap-[16px] my-[12px] mb-[16] sm:!my-[16px] md:!my-[20px] lg:!my-[24px]">
+      <p className="text-[#616161] text-[16px] font-normal">
+        شما هم نظر خود را به اشتراک بگذارید:
+      </p>
+      <Button
+        variant="outlined"
+        className="!w-full md:!w-fit !border !border-[#5559CE] !rounded-[4px] 
+                !px-[38px] !py-[6px] md:!py-[8px] lg:!py-[9px]"
+      >
+        ثبت نظر
+      </Button>
+    </div>
+  );
 }

-export default AddComment
+export default AddComment;
@@ -1,19 +1,19 @@
-import AnimationTextHead from '@/app/component/AnimationTextHead'
-import Comment from '@/app/component/comment'
-import Underline from '@/components/icons/Underline'
-import React from 'react'
-import AddComment from './AddComment'
+import AnimationTextHead from "@/app/component/AnimationTextHead";
+import Comment from "@/app/component/comment";
+import Underline from "@/components/icons/Underline";
+import React from "react";
+import AddComment from "./AddComment";

 function CommentUser({ data, loading }) {
-    return (
-        <div className='mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]'>
-            <AnimationTextHead name='zoom-in-up' text='نظرات'>
-                <Underline />
-            </AnimationTextHead>
-            <AddComment />
-            <Comment data={data} loading={loading} />
-        </div>
-    )
+  return (
+    <div className="mt-[12px] sm:mt-[16px] md:mt-[20px] lg:mt-[24px]">
+      <AnimationTextHead name="zoom-in-up" text="نظرات">
+        <Underline />
+      </AnimationTextHead>
+      <AddComment />
+      <Comment data={data} loading={loading} />
+    </div>
+  );
 }

-export default CommentUser
+export default CommentUser;
@@ -3,13 +3,13 @@ import SocialMedia from "./SocialMedia";
 import CommentUser from "./commentUser";

 function Detail({ data, loading }) {
-    return (
-        <div className="w-full lg:w-[68%]">
-            <Caption data={data} loading={loading} />
-            <SocialMedia loading={loading} />
-            <CommentUser data={data} loading={loading} />
-        </div>
-    )
+  return (
+    <div className="w-full lg:w-[68%]">
+      <Caption data={data} loading={loading} />
+      <SocialMedia loading={loading} />
+      <CommentUser data={data} loading={loading} />
+    </div>
+  );
 }

-export default Detail
+export default Detail;
@@ -1,36 +1,56 @@
-import TextLoading from "@/app/component/loading/Text"
+import TextLoading from "@/app/component/loading/Text";

 function Head({ data, loading }) {
-    return (
-        <div>
-            <TextLoading width={200} height={18} loading={loading}>
-                <div className="flex items-center justify-start gap-1">
-                    <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">بلاگ {'>'}</p>
-                    <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">پوست و مو {'>'}</p>
-                    <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
-                </div>
-            </TextLoading>
-            <div className={loading ? 'mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]' : ''}>
-                <TextLoading width={250} height={22} loading={loading}>
-                    <p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
-                </TextLoading>
-            </div>
-            <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
-                <div className="flex items-center justify-start gap-1">
-                    <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">تاریخ انتشار:</p>
-                    <TextLoading width={55} height={22} loading={loading}>
-                        <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.date_of_release}</p>
-                    </TextLoading>
-                </div>
-                <div className="flex items-center justify-start gap-1">
-                    <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">زمان مطالعه:</p>
-                    <TextLoading width={55} height={22} loading={loading}>
-                        <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">{data.time}</p>
-                    </TextLoading>
-                </div>
-            </div>
+  return (
+    <div>
+      <TextLoading width={200} height={18} loading={loading}>
+        <div className="flex items-center justify-start gap-1">
+          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+            بلاگ {">"}
+          </p>
+          <p className="text-[#9B9B9B] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+            پوست و مو {">"}
+          </p>
+          <p className="text-[#525252] text-[11px] sm:text-[13px] md:text-[15px] lg:text-[16px] font-normal">
+            روش های خانگی محافظت از پوست در تابستان
+          </p>
        </div>
-    )
+      </TextLoading>
+      <div
+        className={
+          loading ? "mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px]" : ""
+        }
+      >
+        <TextLoading width={250} height={22} loading={loading}>
+          <p className="text-[#3B3B3B] mt-[24px] sm:mt-[29px] md:mt-[35px] lg:mt-[40px] text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] font-bold">
+            روش های خانگی محافظت از پوست در تابستان
+          </p>
+        </TextLoading>
+      </div>
+      <div className="flex mt-[16px] sm:mt-[18px] md:mt-[21px] lg:mt-[24px] items-center justify-start gap-[35px]">
+        <div className="flex items-center justify-start gap-1">
+          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
+            تاریخ انتشار:
+          </p>
+          <TextLoading width={55} height={22} loading={loading}>
+            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+              {data.date_of_release}
+            </p>
+          </TextLoading>
+        </div>
+        <div className="flex items-center justify-start gap-1">
+          <p className="text-[#9B9B9B] text-[11px] md:text-[13px] lg:text-[14px] font-normal">
+            زمان مطالعه:
+          </p>
+          <TextLoading width={55} height={22} loading={loading}>
+            <p className="text-[#9B9B9B] text-[11px] md:text-[14px] lg:text-[16px] font-medium">
+              {data.time}
+            </p>
+          </TextLoading>
+        </div>
+      </div>
+    </div>
+  );
 }

-export default Head
+export default Head;
@@ -1,4 +1,4 @@
-'use client'
+"use client";

 import { useEffect, useState } from "react";
 import Detail from "./detail";
@@ -6,24 +6,23 @@ import Head from "./head";
 import RelatedContent from "./relatedContent";

 function BlogPage({ article, articles }) {
+  const [loading, setLoading] = useState(true);

-    const [loading, setLoading] = useState(true);
+  useEffect(() => {
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  }, []);

-    useEffect(() => {
-        setTimeout(() => {
-            setLoading(false);
-        }, 2000);
-    }, []);
-
-    return (
-        <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
-            <Head data={article} loading={loading} />
-            <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
-                <Detail data={article} loading={loading} />
-                <RelatedContent data={articles} loading={loading} />
-            </div>
-        </div>
-    )
+  return (
+    <div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
+      <Head data={article} loading={loading} />
+      <div className="flex flex-col gap-y-[32px] lg:flex-row items-start justify-center gap-[24px] mt-[16px] sm:mt-[19px] md:mt-[21px] lg:mt-[24px]">
+        <Detail data={article} loading={loading} />
+        <RelatedContent data={articles} loading={loading} />
+      </div>
+    </div>
+  );
 }

-export default BlogPage
+export default BlogPage;
@@ -5,42 +5,42 @@ import Image from "next/image";
 import Link from "next/link";

 function Item({ data, idx, loading }) {
-    return (
-        <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
-            <CustomLoading width={80} height={72} loading={loading}>
-                <Link href={`/blog/${data.id}`}>
-                    <Image
-                        className="
+  return (
+    <li className="flex relative items-center justify-start gap-[8px] py-[12px] sm:py-[15px] md:py-[18px] lg:py-[20px]">
+      <CustomLoading width={80} height={72} loading={loading}>
+        <Link href={`/blog/${data.id}`}>
+          <Image
+            className="
                        min-w-[64px] sm:min-w-[73px] md:min-w-[85px] lg:min-w-[97px] 
                        min-h-[56px] sm:min-h-[64px] md:min-h-[75px] lg:min-h-[88px] 
                        rounded-[8px] overflow-hidden object-cover
                    "
-                        src={data.src}
-                        alt="article"
-                        height={88}
-                        width={97}
-                    />
-                </Link>
-            </CustomLoading>
-            <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
-                <TextLoading width={150} height={18} loading={loading}>
-                    <Link href={`/blog/${data.id}`}>
-                        <p
-                            className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap"
-                        >{data.title}</p>
-                    </Link>
-                </TextLoading>
-                <TextLoading width={110} height={18} loading={loading}>
-                    <p
-                        className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
-                    >تاریخ انتشار: {data.date_of_release}</p>
-                </TextLoading>
-            </div>
-            {data.id > idx + 1 && (
-                <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
-            )}
-        </li>
-    )
+            src={data.src}
+            alt="article"
+            height={88}
+            width={97}
+          />
+        </Link>
+      </CustomLoading>
+      <div className="flex flex-col gap-[16px] sm:gap-[18px] md:gap-[21px] lg:gap-[24px] items-start justify-between">
+        <TextLoading width={150} height={18} loading={loading}>
+          <Link href={`/blog/${data.id}`}>
+            <p className="text-[#3B3B3B] text-[14px] md:text-[16px] font-bold text-wrap lg:text-nowrap">
+              {data.title}
+            </p>
+          </Link>
+        </TextLoading>
+        <TextLoading width={110} height={18} loading={loading}>
+          <p className="text-[#9B9B9B] text-[12px] text-nowrap font-normal">
+            تاریخ انتشار: {data.date_of_release}
+          </p>
+        </TextLoading>
+      </div>
+      {data.id > idx + 1 && (
+        <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
+      )}
+    </li>
+  );
 }

-export default Item
+export default Item;
@@ -1,26 +1,21 @@
-import AnimationTextHead from '@/app/component/AnimationTextHead'
-import UnderlineLG from '@/components/icons/UnderlineLG'
-import React from 'react'
-import Item from './Item'
+import AnimationTextHead from "@/app/component/AnimationTextHead";
+import UnderlineLG from "@/components/icons/UnderlineLG";
+import React from "react";
+import Item from "./Item";

 function RelatedContent({ data, loading }) {
  return (
-    <div className='p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
-      <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
+    <div className="p-[12px] w-full lg:w-fit md:p-[14px] lg:p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]">
+      <AnimationTextHead name="fade-up" text="مطالب مرتبط">
        <UnderlineLG />
      </AnimationTextHead>
-      <ul className='flex w-full lg:w-fit flex-col justify-start items-start'>
+      <ul className="flex w-full lg:w-fit flex-col justify-start items-start">
        {data.map((item, idx) => (
-          <Item
-            idx={idx}
-            data={item}
-            key={item.id}
-            loading={loading}
-          />
+          <Item idx={idx} data={item} key={item.id} loading={loading} />
        ))}
      </ul>
    </div>
-  )
+  );
 }

-export default RelatedContent
+export default RelatedContent;