page home responsive & change component element & page blog item

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>
     )
 }