change data articles and create head and detail page item blog

2024-07-19 22:05:53 +03:30
parent 03e3cc3177
commit 57d33a532c
8 changed files with 94 additions and 17 deletions
@@ -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
@@ -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
@@ -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>
    )
 }