page blogs title and head and list article & change footer hover mode
This commit is contained in:
Ehsan
@@ -0,0 +1,47 @@
|
||||
import Image from 'next/image'
|
||||
import React from 'react'
|
||||
|
||||
function Head() {
|
||||
return (
|
||||
<div className='flex mt-[40px] items-center justify-center gap-[24px]'>
|
||||
<div className='cover-head-blogs'>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-1.png'
|
||||
width={600}
|
||||
height={424}
|
||||
/>
|
||||
<p>روش های خانگی محافظت از پوست در تابستان</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'>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-2.png'
|
||||
width={600}
|
||||
height={424}
|
||||
/>
|
||||
<p className='!text-[16px] !bottom-[20px] !right-[16px]'>فواید نوشیدن آب برای سلامتی</p>
|
||||
</div>
|
||||
<div className='cover-head-blogs'>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-3.png'
|
||||
width={600}
|
||||
height={424}
|
||||
/>
|
||||
<p className='!text-[16px] !bottom-[20px] !right-[16px]'>راهکارهای ساده برای درمان سر درد</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className='cover-head-blogs'>
|
||||
<Image
|
||||
src='/assets/images/head-blogs-4.png'
|
||||
width={600}
|
||||
height={424}
|
||||
/>
|
||||
<p>تغذیه مناسب برای کاهش فشار خون</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Head
|
||||
@@ -0,0 +1,15 @@
|
||||
import Head from "./Head";
|
||||
import Title from "./title";
|
||||
import LatestArticles from "./latestArticles";
|
||||
|
||||
function BlogsPage() {
|
||||
return (
|
||||
<div className="padding-responsive pt-[168px]">
|
||||
<Title />
|
||||
<Head />
|
||||
<LatestArticles />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default BlogsPage
|
||||
@@ -0,0 +1,28 @@
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link';
|
||||
|
||||
function Article({ data }) {
|
||||
return (
|
||||
<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}
|
||||
alt="article-img"
|
||||
height={217}
|
||||
width={392}
|
||||
/>
|
||||
</Link>
|
||||
<div className='p-[16px]'>
|
||||
<Link href={`/blog/${data.id}`}>
|
||||
<p className='text-[#3B3B3B] 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>
|
||||
<p className='text-[#9B9B9B] text-[14px] font-medium'>زمان مطالعه: {data.time}</p>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
)
|
||||
}
|
||||
|
||||
export default Article;
|
||||
@@ -0,0 +1,20 @@
|
||||
import articles from '@/data/articles.json';
|
||||
import Article from "./Article";
|
||||
|
||||
function LatestArticles() {
|
||||
return (
|
||||
<div>
|
||||
<p className="text-[#3B3B3B] text-[20px] font-bold my-[24px]">جدیدترین مقاله ها</p>
|
||||
<ul className="grid grid-cols-3 gap-6">
|
||||
{articles.map(item => (
|
||||
<Article
|
||||
data={item}
|
||||
key={item.id}
|
||||
/>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LatestArticles
|
||||
@@ -0,0 +1,20 @@
|
||||
import { Button } from "@mui/material"
|
||||
|
||||
function ItemTitle({ name, idx, activeBtn, setActiveBtn }) {
|
||||
|
||||
return (
|
||||
<Button
|
||||
className={`
|
||||
!py-2 !px-4 !shadow-none !rounded-[8px]
|
||||
${activeBtn === idx ? '!bg-[#F17732] !text-[#FAFAFA]' : '!bg-[#F5F5F5] !text-[#3B3B3B]'}
|
||||
`}
|
||||
onClick={() => setActiveBtn(idx)}
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
>
|
||||
{name}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export default ItemTitle
|
||||
@@ -0,0 +1,26 @@
|
||||
'use client';
|
||||
import { useState } from "react";
|
||||
import ItemTitle from "./ItemTitle";
|
||||
|
||||
const listTitle = ['سلامت روان', 'پوست و مو', 'کودک و نوجوان', 'دارو', 'تغذیه'];
|
||||
|
||||
function Title() {
|
||||
|
||||
const [activeBtn, setActiveBtn] = useState(0);
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-start gap-4">
|
||||
{listTitle.map((name, idx) => (
|
||||
<ItemTitle
|
||||
setActiveBtn={setActiveBtn}
|
||||
activeBtn={activeBtn}
|
||||
name={name}
|
||||
idx={idx}
|
||||
key={idx}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Title
|
||||
@@ -9,6 +9,7 @@ import LocationF from "../icons/LocationF";
|
||||
import CalendarAddF from "../icons/CalendarAddF";
|
||||
import StethoscopeF from "../icons/StethoscopeF";
|
||||
import Logo from "@/app/component/Logo";
|
||||
import { Button } from "@mui/material";
|
||||
|
||||
const socialMedias = [
|
||||
<Linkedin />,
|
||||
@@ -34,7 +35,11 @@ function Footer() {
|
||||
<div>
|
||||
<div className="flex items-center justify-center gap-[100px]">
|
||||
{head.map((item, idx) => (
|
||||
<div key={idx} className="flex items-center justify-start gap-1">
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center cursor-pointer justify-start gap-1 p-[6px] hover:bg-[#F7F7F7] hover:transition-all
|
||||
transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-transparent hover:bg-none hover:border-[#FDBD9F]"
|
||||
>
|
||||
{item.icon}
|
||||
<p className="text-[#2F2F2F] text-[16px] font-medium">{item.text}</p>
|
||||
</div>
|
||||
|
||||
@@ -12,7 +12,7 @@ function Layout({ children, title, name }) {
|
||||
{children}
|
||||
</section>
|
||||
</main>
|
||||
<footer className="bg-[#F5F5F5] mt-[100px] pt-[44px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
|
||||
<footer className="bg-[#F5F5F5] pt-[44px] mt-[100px] bg-banner-footer !bg-center !bg-no-repeat !bg-cover">
|
||||
<div className='padding-responsive'>
|
||||
<Footer />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user