page home responsive & change component element & page blog item

2024-08-15 10:10:57 +03:30
parent 1341253384
commit fd3b82143b
44 changed files with 4149 additions and 103 deletions
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
    )
 }