page home responsive & change component element & page blog item

components/blog/detail/Caption.js

@@ -0,0 +1,33 @@
+import Image from 'next/image'
+import React from 'react'
+
+function Caption({ data }) {
+    return (
+        <>
+            <Image
+                className="rounded-[8px] overflow-hidden w-full"
+                src={data.cover_first}
+                alt="cover-blog"
+                height={570}
+                width={808}
+            />
+            <div
+                className="my-6 text-[#525252] text-[16px] font-normal leading-[32px]"
+                dangerouslySetInnerHTML={{ __html: data.caption }}
+            />
+            <Image
+                className="rounded-[8px] overflow-hidden w-full"
+                src={data.cover_second}
+                alt="cover-blog"
+                height={570}
+                width={808}
+            />
+            <div
+                className="my-6"
+                dangerouslySetInnerHTML={{ __html: data.caption }}
+            />
+        </>
+    )
+}
+
+export default Caption

components/blog/detail/SocialMedia.js

@@ -0,0 +1,27 @@
+import LinkedinB from "@/components/icons/LinkedinB"
+import TelegramB from "@/components/icons/TelegramB"
+import WhatsappB from "@/components/icons/WhatsappB"
+
+const socials = [
+    <WhatsappB />,
+    <TelegramB />,
+    <LinkedinB />
+]
+
+function SocialMedia() {
+    return (
+        <ul className="flex mt-[8px] pb-[32px] relative items-center justify-end gap-4">
+            {socials.map((item, idx) => (
+                <li
+                    key={idx}
+                    className="bg-[#EFEFEF] rounded-full hover-rotate-icon p-[9px]"
+                >
+                    {item}
+                </li>
+            ))}
+            <span className="absolute right-1/2 translate-x-1/2 bottom-0 w-[calc(100%-32px-36px)] h-px bg-[#D7D7D7] block"></span>
+        </ul>
+    )
+}
+
+export default SocialMedia

components/blog/detail/commentUser/AddComment.js

@@ -0,0 +1,18 @@
+import { Button } from '@mui/material'
+import React from 'react'
+
+function AddComment() {
+    return (
+        <div className='flex items-center justify-start gap-[16px] my-[24px]'>
+            <p className='text-[#616161] text-[16px] font-normal'>شما هم نظر خود را به اشتراک بگذارید:</p>
+            <Button
+                variant='outlined'
+                className='!border !border-[#5559CE] !rounded-[4px] !px-[38px] !py-[9px]'
+            >
+                ثبت نظر
+            </Button>
+        </div>
+    )
+}
+
+export default AddComment

components/blog/detail/commentUser/index.js

@@ -0,0 +1,19 @@
+import AnimationTextHead from '@/app/component/AnimationTextHead'
+import Comment from '@/app/component/comment'
+import Underline from '@/components/icons/Underline'
+import React from 'react'
+import AddComment from './AddComment'
+
+function CommentUser({ data }) {
+    return (
+        <div className='mt-[24px]'>
+            <AnimationTextHead name='zoom-in-up' text='نظرات'>
+                <Underline />
+            </AnimationTextHead>
+            <AddComment />
+            <Comment data={data} />
+        </div>
+    )
+}
+
+export default CommentUser

components/blog/detail/index.js

@@ -1,17 +1,13 @@
-import Image from "next/image"
+import Caption from "./Caption";
+import SocialMedia from "./SocialMedia";
+import CommentUser from "./commentUser";
 
 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 className="w-[68%]">
+            <Caption data={data} />
+            <SocialMedia />
+            <CommentUser data={data} />
         </div>
     )
 }

components/blog/index.js

@@ -1,15 +1,14 @@
 import Detail from "./detail";
 import Head from "./head";
+import RelatedContent from "./relatedContent";
 
-function BlogPage({ article }) {
-
-    console.log(article);
-
+function BlogPage({ article, articles }) {
     return (
         <div className="padding-responsive pt-[176px]">
             <Head data={article} />
-            <div className="flex items-center justify-center gap-6">
+            <div className="flex items-start justify-center gap-[24px] mt-[24px]">
                 <Detail data={article} />
+                <RelatedContent data={articles} />
             </div>
         </div>
     )

components/blog/relatedContent/Item.js

@@ -0,0 +1,31 @@
+import Image from "next/image";
+import Link from "next/link";
+
+function Item({ data }) {
+    return (
+        <li className="flex relative items-center justify-start gap-[8px] py-[20px]">
+            <Link href={`/blog/${data.id}`}>
+                <Image
+                    className="w-[97px] h-[88px] rounded-[8px] overflow-hidden object-cover"
+                    src={data.src}
+                    alt="article"
+                    height={88}
+                    width={97}
+                />
+            </Link>
+            <div className="flex flex-col gap-[24px] items-start justify-between">
+                <Link href={`/blog/${data.id}`}>
+                    <p
+                        className="text-[#3B3B3B] text-[16px] text-nowrap font-bold"
+                    >{data.title}</p>
+                </Link>
+                <p
+                    className="text-[#9B9B9B] text-[12px] text-nowrap font-normal"
+                >تاریخ انتشار: {data.date_of_release}</p>
+            </div>
+            <span className="block absolute right-0 bottom-0 w-full h-px bg-[#EFEFEF]"></span>
+        </li>
+    )
+}
+
+export default Item

components/blog/relatedContent/index.js

@@ -0,0 +1,24 @@
+import AnimationTextHead from '@/app/component/AnimationTextHead'
+import UnderlineLG from '@/components/icons/UnderlineLG'
+import React from 'react'
+import Item from './Item'
+
+function RelatedContent({ data }) {
+  return (
+    <div className='p-[16px] bg-[#FFF] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)]'>
+      <AnimationTextHead name='fade-up' text='مطالب مرتبط'>
+        <UnderlineLG />
+      </AnimationTextHead>
+      <ul className='flex w-fit flex-col justify-start items-start'>
+        {data.map(item => (
+          <Item
+            data={item}
+            key={item.id}
+          />
+        ))}
+      </ul>
+    </div>
+  )
+}
+
+export default RelatedContent