hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix responsive all pages & change style page list blog and blog item & add date picker

Browse Source
This commit is contained in:
Ehsan
2024-08-23 18:57:28 +03:30
parent c62fb78f8c
commit 9701547d1f
35 changed files with 19276 additions and 225 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/blogs/Head.js
+11 -11
View File
@@ -3,45 +3,45 @@ import React from 'react'
function Head() {
return (
<div className='flex mt-[40px] items-center justify-center gap-[24px]'>
<div className='cover-head-blogs'>
<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]'>
<div className='w-full lg:w-1/2 cover-head-blogs'>
<Image
src='/assets/images/head-blogs-1.png'
width={600}
height={424}
alt='head blog'
/>
<p>روش های خانگی محافظت از پوست در تابستان</p>
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>روش های خانگی محافظت از پوست در تابستان</p>
</div>
<div className='flex flex-col items-center justify-center gap-[24px]'>
<div className='flex items-center justify-center gap-[24px]'>
<div className='cover-head-blogs'>
<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]'>
<div className='w-full cover-head-blogs'>
<Image
src='/assets/images/head-blogs-2.png'
width={600}
height={424}
alt='head blog'
/>
<p className='!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
</div>
<div className='cover-head-blogs'>
<div className='w-full cover-head-blogs'>
<Image
src='/assets/images/head-blogs-3.png'
width={600}
height={424}
alt='head blog'
/>
<p className='!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
<p className='!text-[14px] md:!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
</div>
</div>
<div className='cover-head-blogs'>
<div className='w-full cover-head-blogs'>
<Image
src='/assets/images/head-blogs-4.png'
width={600}
height={424}
alt='head blog'
/>
<p>تغذیه مناسب برای کاهش فشار خون</p>
<p className='text-[14px] sm:text-[17px] md:text-[20px] lg:text-[24px] right-[16px] md:right-[20px] lg:right-[24px]'>تغذیه مناسب برای کاهش فشار خون</p>
</div>
</div>
</div>
components/blogs/index.js
+1 -1
View File
@@ -4,7 +4,7 @@ import LatestArticles from "./latestArticles";
function BlogsPage() {
return (
<div className="padding-responsive pt-[168px]">
<div className="padding-responsive pt-[84px] sm:pt-[110px] md:pt-[140px] lg:pt-[168px]">
<Title />
<Head />
<LatestArticles />
components/blogs/latestArticles/Article.js
+4 -3
View File
@@ -6,15 +6,16 @@ function Article({ data }) {
<li className='rounded-[8px] overflow-hidden bg-[#FFF] shadow-[0px_0px_41px_0px_rgba(173,_181,_189,_0.15)]'>
<Link href={`/blog/${data.id}`}>
<Image
src={data.src}
className='w-full'
alt="article-img"
src={data.src}
height={217}
width={392}
/>
</Link>
<div className='p-[16px]'>
<div className='p-[12px] md:p-[14px] lg:p-[16px]'>
<Link href={`/blog/${data.id}`}>
<p className='text-[#3B3B3B] mb-[16px] text-[16px] font-bold'>{data.title}</p>
<p className='text-[#3B3B3B] mb-[12px] md:mb-[14px] lg:mb-[16px] text-[16px] font-bold'>{data.title}</p>
</Link>
<div className='flex items-center justify-start gap-[35px]'>
<p className='text-[#9B9B9B] text-[14px] font-medium'>تاریخ انتشار: {data.date_of_release}</p>
components/blogs/latestArticles/index.js
+2 -2
View File
@@ -5,8 +5,8 @@ import Pagination from '@/app/component/Pagination';
function LatestArticles() {
return (
<div>
<p className="text-[#3B3B3B] text-[20px] font-bold my-[24px]">جدیدترین مقاله ها</p>
<ul className="grid grid-cols-3 gap-6">
<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}
components/blogs/title/ItemTitle.js
+11 -9
View File
@@ -3,17 +3,19 @@ import { Button } from "@mui/material"
function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
return (
<Button
className={`
!py-2 !px-4 !shadow-none !rounded-[8px]
<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]'}
`}
onClick={() => setActiveBtn(idx)}
variant="contained"
color="secondary"
>
{name}
</Button>
onClick={() => setActiveBtn(idx)}
variant="contained"
color="secondary"
>
{name}
</Button>
</li>
)
}
components/blogs/title/index.js
+2 -2
View File
@@ -9,7 +9,7 @@ function Title() {
const [activeBtn, setActiveBtn] = useState(0);
return (
<div className="flex items-center justify-start gap-4">
<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}
@@ -19,7 +19,7 @@ function Title() {
key={idx}
/>
))}
</div>
</ul>
)
}