add prettier formatter to all file
This commit is contained in:
Ehsan
+104
-72
@@ -1,77 +1,109 @@
|
||||
import CustomLoading from '@/app/component/loading/Custom'
|
||||
import TextLoading from '@/app/component/loading/Text'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function Head({ loading }) {
|
||||
return (
|
||||
<div className='flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
|
||||
<Link href='#' className='w-full lg:w-1/2 cover-head-blogs'>
|
||||
<CustomLoading loading={loading} width='full' height={400}>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-1.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
<div className='w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
|
||||
<div className='w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]'>
|
||||
<Link href='#' className='w-full cover-head-blogs'>
|
||||
<CustomLoading loading={loading} width='full' height={180}>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-2.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href='#' className='w-full cover-head-blogs'>
|
||||
<CustomLoading loading={loading} width='full' height={180}>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-3.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href='#' className='w-full cover-head-blogs'>
|
||||
<CustomLoading loading={loading} width='full' height={180}>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-4.png'
|
||||
width={600}
|
||||
height={424}
|
||||
alt='head blog'
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div className={loading ? '!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]' : ''}>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
return (
|
||||
<div className="flex flex-col lg:flex-row mt-[40px] items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
|
||||
<Link href="#" className="w-full lg:w-1/2 cover-head-blogs">
|
||||
<CustomLoading loading={loading} width="full" height={400}>
|
||||
<Image
|
||||
src="/assets/images/head-blogs-1.png"
|
||||
width={600}
|
||||
height={424}
|
||||
alt="head blog"
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div
|
||||
className={
|
||||
loading
|
||||
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
|
||||
روش های خانگی محافظت از پوست در تابستان
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
)
|
||||
</Link>
|
||||
<div className="w-full lg:w-1/2 flex flex-col items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
|
||||
<div className="w-full flex flex-col sm:flex-row items-center justify-center gap-[16px] sm:gap-[19px] md:gap-[22px] lg:gap-[24px]">
|
||||
<Link href="#" className="w-full cover-head-blogs">
|
||||
<CustomLoading loading={loading} width="full" height={180}>
|
||||
<Image
|
||||
src="/assets/images/head-blogs-2.png"
|
||||
width={600}
|
||||
height={424}
|
||||
alt="head blog"
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div
|
||||
className={
|
||||
loading
|
||||
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
|
||||
فواید نوشیدن آب برای سلامتی
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
<Link href="#" className="w-full cover-head-blogs">
|
||||
<CustomLoading loading={loading} width="full" height={180}>
|
||||
<Image
|
||||
src="/assets/images/head-blogs-3.png"
|
||||
width={600}
|
||||
height={424}
|
||||
alt="head blog"
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div
|
||||
className={
|
||||
loading
|
||||
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className="!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]">
|
||||
راهکارهای ساده برای درمان سر درد
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
<Link href="#" className="w-full cover-head-blogs">
|
||||
<CustomLoading loading={loading} width="full" height={180}>
|
||||
<Image
|
||||
src="/assets/images/head-blogs-4.png"
|
||||
width={600}
|
||||
height={424}
|
||||
alt="head blog"
|
||||
/>
|
||||
</CustomLoading>
|
||||
<div
|
||||
className={
|
||||
loading
|
||||
? "!absolute !bottom-[26px] !right-[16px] md:!right-[20px] lg:!right-[24px]"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<TextLoading width={150} height={20} loading={loading}>
|
||||
<p className="text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]">
|
||||
تغذیه مناسب برای کاهش فشار خون
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Head
|
||||
export default Head;
|
||||
|
||||
+15
-16
@@ -1,4 +1,4 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
@@ -7,22 +7,21 @@ import Title from "./title";
|
||||
import LatestArticles from "./latestArticles";
|
||||
|
||||
function BlogsPage() {
|
||||
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]">
|
||||
<Title />
|
||||
<Head loading={loading} />
|
||||
<LatestArticles loading={loading} />
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
|
||||
<Title />
|
||||
<Head loading={loading} />
|
||||
<LatestArticles loading={loading} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BlogsPage
|
||||
export default BlogsPage;
|
||||
|
||||
@@ -1,41 +1,47 @@
|
||||
import CustomLoading from '@/app/component/loading/Custom';
|
||||
import TextLoading from '@/app/component/loading/Text';
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link';
|
||||
import CustomLoading from "@/app/component/loading/Custom";
|
||||
import TextLoading from "@/app/component/loading/Text";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
function Article({ data, loading }) {
|
||||
return (
|
||||
<li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
|
||||
<CustomLoading width='full' height={200} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<Image
|
||||
className='w-full'
|
||||
alt="article-img"
|
||||
src={data.src}
|
||||
height={217}
|
||||
width={392}
|
||||
/>
|
||||
</Link>
|
||||
</CustomLoading>
|
||||
<div className='p-[12px] md:p-[14px] lg:p-[16px]'>
|
||||
<div className={loading ? 'mb-[12px] md:mb-[14px] lg:mb-[16px]' : ''}>
|
||||
<TextLoading width={150} height={18} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
|
||||
</Link>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className='flex items-center justify-start gap-[35px]'>
|
||||
<TextLoading width={100} height={18} loading={loading}>
|
||||
<p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
|
||||
</TextLoading>
|
||||
<TextLoading width={110} height={18} loading={loading}>
|
||||
<p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
return (
|
||||
<li className="rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]">
|
||||
<CustomLoading width="full" height={200} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<Image
|
||||
className="w-full"
|
||||
alt="article-img"
|
||||
src={data.src}
|
||||
height={217}
|
||||
width={392}
|
||||
/>
|
||||
</Link>
|
||||
</CustomLoading>
|
||||
<div className="p-[12px] md:p-[14px] lg:p-[16px]">
|
||||
<div className={loading ? "mb-[12px] md:mb-[14px] lg:mb-[16px]" : ""}>
|
||||
<TextLoading width={150} height={18} loading={loading}>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<p className="text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold">
|
||||
{data.title}
|
||||
</p>
|
||||
</Link>
|
||||
</TextLoading>
|
||||
</div>
|
||||
<div className="flex items-center justify-start gap-[35px]">
|
||||
<TextLoading width={100} height={18} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[14px] font-medium">
|
||||
تاریخ انتشار: {data.date_of_release}
|
||||
</p>
|
||||
</TextLoading>
|
||||
<TextLoading width={110} height={18} loading={loading}>
|
||||
<p className="text-[#9B9B9B] text-[14px] font-medium">
|
||||
زمان مطالعه: {data.time}
|
||||
</p>
|
||||
</TextLoading>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default Article;
|
||||
export default Article;
|
||||
|
||||
@@ -1,25 +1,23 @@
|
||||
import articles from '@/data/articles.json';
|
||||
import articles from "@/data/articles.json";
|
||||
import Article from "./Article";
|
||||
import Pagination from '@/app/component/Pagination';
|
||||
import Pagination from "@/app/component/Pagination";
|
||||
|
||||
function LatestArticles({ loading }) {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">جدیدترین مقاله ها</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
{articles.map(item => (
|
||||
<Article
|
||||
data={item}
|
||||
key={item.id}
|
||||
loading={loading}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
<div className='mt-[56px] flex justify-center'>
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold my-[16px] md:my-[20px] lg:my-[24px]">
|
||||
جدیدترین مقاله ها
|
||||
</p>
|
||||
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-[16px] md:gap-[20px] lg:gap-[24px]">
|
||||
{articles.map((item) => (
|
||||
<Article data={item} key={item.id} loading={loading} />
|
||||
))}
|
||||
</ul>
|
||||
<div className="mt-[56px] flex justify-center">
|
||||
<Pagination />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LatestArticles
|
||||
export default LatestArticles;
|
||||
|
||||
@@ -1,22 +1,25 @@
|
||||
import { Button } from "@mui/material"
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
|
||||
|
||||
return (
|
||||
<li>
|
||||
<Button
|
||||
className={`
|
||||
return (
|
||||
<li>
|
||||
<Button
|
||||
className={`
|
||||
!py-[4px] md:!py-[6px] lg:!py-[8px] !px-[8px] md:!px-[12px] lg:!px-[16px] !shadow-none !rounded-[8px] !text-[14px] md:!text-[16px
|
||||
${activeBtn === idx ? '!bg-[#F17732] !text-[#FAFAFA]' : '!bg-[#F5F5F5] !text-[#3B3B3B]'}
|
||||
${
|
||||
activeBtn === idx
|
||||
? "!bg-[#F17732] !text-[#FAFAFA]"
|
||||
: "!bg-[#F5F5F5] !text-[#3B3B3B]"
|
||||
}
|
||||
`}
|
||||
onClick={() => setActiveBtn(idx)}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
{name}
|
||||
</Button>
|
||||
</li>
|
||||
)
|
||||
onClick={() => setActiveBtn(idx)}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
{name}
|
||||
</Button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
export default ItemTitle
|
||||
export default ItemTitle;
|
||||
|
||||
@@ -1,26 +1,25 @@
|
||||
'use client';
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import ItemTitle from "./ItemTitle";
|
||||
|
||||
const listTitle = ['سلامت روان', 'پوست و مو', 'کودک و نوجوان', 'دارو', 'تغذیه'];
|
||||
const listTitle = ["سلامت روان", "پوست و مو", "کودک و نوجوان", "دارو", "تغذیه"];
|
||||
|
||||
function Title() {
|
||||
const [activeBtn, setActiveBtn] = useState(0);
|
||||
|
||||
const [activeBtn, setActiveBtn] = useState(0);
|
||||
|
||||
return (
|
||||
<ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
|
||||
{listTitle.map((name, idx) => (
|
||||
<ItemTitle
|
||||
setActiveBtn={setActiveBtn}
|
||||
activeBtn={activeBtn}
|
||||
name={name}
|
||||
idx={idx}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
return (
|
||||
<ul className="flex w-full overflow-auto hidden-scroll items-center justify-start gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px]">
|
||||
{listTitle.map((name, idx) => (
|
||||
<ItemTitle
|
||||
setActiveBtn={setActiveBtn}
|
||||
activeBtn={activeBtn}
|
||||
name={name}
|
||||
idx={idx}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
);
|
||||
}
|
||||
|
||||
export default Title
|
||||
export default Title;
|
||||
|
||||
Reference in New Issue
Block a user