update fonction de texte

frontend/src/components/PostDetails.jsx

@@ -4,7 +4,7 @@ import { useParams, useNavigate } from "react-router-dom";
 import api from "../api";
 
 const PostDetails = () => {
-  const { slug } = useParams(); // ✅ Utilisation correcte du slug
+  const { slug } = useParams();
   const [post, setPost] = useState(null);
   const [image, setImage] = useState(null);
   const navigate = useNavigate();
@@ -18,16 +18,13 @@ const PostDetails = () => {
 
       try {
         console.log(`📢 Requête API pour le slug : ${slug}`);
-        
-        // ✅ Requête API correcte
         const response = await api.get(`wp/v2/posts?slug=${slug}&_fields=id,title,content,featured_media,date`);
 
         if (response.data.length > 0) {
-          const article = response.data[0]; // ✅ Récupération du premier article trouvé
+          const article = response.data[0];
           setPost(article);
           console.log("✅ Article trouvé :", article);
 
-          // ✅ Récupération de l'image en vedette si elle existe
           if (article.featured_media) {
             console.log(`📢 Récupération de l'image ID : ${article.featured_media}`);
             const mediaResponse = await api.get(`wp/v2/media/${article.featured_media}`);
@@ -42,7 +39,7 @@ const PostDetails = () => {
     };
 
     fetchPost();
-  }, [slug]); // ✅ Dépendance correcte
+  }, [slug]);
 
   if (!post) {
     return <CircularProgress sx={{ display: "block", margin: "auto", mt: 5 }} />;
@@ -50,12 +47,10 @@ const PostDetails = () => {
 
   return (
     <Box sx={{ padding: "40px 20px", display: "flex", flexDirection: "column" }}>
-      {/* ✅ Bouton Retour */}
       <Button onClick={() => navigate(-1)} variant="contained" sx={{ mt: 5, mb: 3, maxWidth: "200px" }}>
         ⬅ Retour
       </Button>
 
-      {/* ✅ Titre de l'article */}
       <Typography
         variant="h1"
         sx={{
@@ -68,7 +63,6 @@ const PostDetails = () => {
         {post.title.rendered}
       </Typography>
 
-      {/* ✅ Image + Contenu */}
       <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", padding: "40px 20px", margin: "auto" }}>
         {image && (
           <Box
@@ -78,7 +72,18 @@ const PostDetails = () => {
             sx={{ width: "100%", maxHeight: "400px", objectFit: "cover", borderRadius: "8px", mb: 3 }}
           />
         )}
-        <Typography variant="body1" sx={{ maxWidth: "800px", mx: "auto" }} dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
+
+        <Box
+          sx={{
+            maxWidth: "800px",
+            mx: "auto",
+            "& h2": { color: "#315397", mt: 4, mb: 2 },
+            "& h3": { color: "#315397", mt: 3, mb: 1 },
+            "& h4": { color: "#315397", mt: 2, mb: 1 },
+            "& p": { mb: 2 },
+          }}
+          dangerouslySetInnerHTML={{ __html: post.content.rendered }}
+        />
       </Box>
     </Box>
   );