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

change data articles and create head and detail page item blog

Browse Source
This commit is contained in:
Ehsan
2024-07-19 22:05:53 +03:30
parent 03e3cc3177
commit 57d33a532c
8 changed files with 94 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/blog/detail/index.js
+19
View File
@@ -0,0 +1,19 @@
import Image from "next/image"
function Detail({ data }) {
return (
<div>
<Image
className="rounded-[8px] overflow-hidden"
src={data.cover}
alt="cover-blog"
height={570}
width={808}
/>
<div dangerouslySetInnerHTML={{ __html: data.caption }} />
{/* <p >{data.caption}</p> */}
</div>
)
}
export default Detail
components/blog/head/index.js
+24
View File
@@ -0,0 +1,24 @@
function Head({ data }) {
return (
<div>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[16px] font-normal">بلاگ {'>'}</p>
<p className="text-[#9B9B9B] text-[16px] font-normal">پوست و مو {'>'}</p>
<p className="text-[#525252] text-[16px] font-normal">روش های خانگی محافظت از پوست در تابستان</p>
</div>
<p className="text-[#3B3B3B] mt-[40px] text-[24px] font-bold">روش های خانگی محافظت از پوست در تابستان</p>
<div className="flex mt-6 items-center justify-start gap-[35px]">
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[14px] font-normal">تاریخ انتشار:</p>
<p className="text-[#9B9B9B] text-[16px] font-medium">{data.date_of_release}</p>
</div>
<div className="flex items-center justify-start gap-1">
<p className="text-[#9B9B9B] text-[14px] font-normal">زمان مطالعه:</p>
<p className="text-[#9B9B9B] text-[16px] font-medium">{data.time}</p>
</div>
</div>
</div>
)
}
export default Head
components/blog/index.js
+12 -3
View File
@@ -1,7 +1,16 @@
function BlogPage() {
import Detail from "./detail";
import Head from "./head";
function BlogPage({ article }) {
console.log(article);
return (
<div className="padding-responsive">
<div className="padding-responsive pt-[176px]">
<Head data={article} />
<div className="flex items-center justify-center gap-6">
<Detail data={article} />
</div>
</div>
)
}
components/blogs/latestArticles/index.js
+4
View File
@@ -1,5 +1,6 @@
import articles from '@/data/articles.json';
import Article from "./Article";
import Pagination from '@/app/component/Pagination';
function LatestArticles() {
return (
@@ -13,6 +14,9 @@ function LatestArticles() {
/>
))}
</ul>
<div className='mt-[56px] flex justify-center'>
<Pagination />
</div>
</div>
)
}
components/layout/Header.js
-3
View File
@@ -4,9 +4,6 @@ import { Button } from "@mui/material";
import Link from "next/link";
function Header({ name }) {
console.log(name);
return (
<div
className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"