From 5827eb83be2029d99e3ac01e065d44c820f08e90 Mon Sep 17 00:00:00 2001
From: Wander06 <wandersonpsilva7@gmail.com>
Date: Thu, 1 Feb 2024 15:03:03 -0300
Subject: [PATCH] Finalizando a descricao das paginas com descricao

---
 src/pages/events-description/index.js     | 10 +++++++-
 src/pages/events-description/styled.js    |  7 +++++-
 src/pages/therapies-description/index.js  | 15 +++++++++---
 src/pages/therapies-description/styled.js | 28 ++++++++++++++++-------
 src/pages/workshop-description/index.js   | 14 ++++++++++--
 src/pages/workshop-description/styled.js  | 28 ++++++++++++++++-------
 6 files changed, 79 insertions(+), 23 deletions(-)

diff --git a/src/pages/events-description/index.js b/src/pages/events-description/index.js
index b58b709..82f164b 100644
--- a/src/pages/events-description/index.js
+++ b/src/pages/events-description/index.js
@@ -19,6 +19,8 @@ import {
   faLocationDot
 } from '@fortawesome/free-solid-svg-icons'
 import NavBar from '../../components/navbar'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
 
 export const EventsPageDescription = () => {
   const [event, setEvent] = useState([])
@@ -167,7 +169,13 @@ export const EventsPageDescription = () => {
           </ul>
           <div className="description">
             <p className="text-title-description">Descrição</p>
-            <p>{event?.attributes?.descricao}</p>
+            {(
+              <div>
+                <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+                {event?.attributes?.descricao}
+                </ReactMarkdown>
+              </div>
+            )}
           </div>
         </section>
         <div className="Container-button">
diff --git a/src/pages/events-description/styled.js b/src/pages/events-description/styled.js
index 8bde6c1..1a6b535 100644
--- a/src/pages/events-description/styled.js
+++ b/src/pages/events-description/styled.js
@@ -65,6 +65,7 @@ const EventsStyleDescription = styled.div`
   }
 
   .text-title-description {
+    padding-bottom: 0.5em;
     font-size: 1.875em;
     font-weight: bold;
   }
@@ -79,9 +80,13 @@ const EventsStyleDescription = styled.div`
 
   .description {
     padding-top: 1em;
+    li {
+      padding-top: 0em;
+    }
 
     p {
-      padding-top: 3em;
+    padding-top: 1em;
+
     }
   }
 
diff --git a/src/pages/therapies-description/index.js b/src/pages/therapies-description/index.js
index 646a05f..4849522 100644
--- a/src/pages/therapies-description/index.js
+++ b/src/pages/therapies-description/index.js
@@ -18,6 +18,8 @@ import 'swiper/css/navigation'
 import 'swiper/css/thumbs'
 import NavBar from '../../components/navbar'
 import { Link, useParams } from 'react-router-dom'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
 
 export const DetailsTherapies = () => {
   const [therapies, setTherapies] = useState([])
@@ -158,9 +160,16 @@ export const DetailsTherapies = () => {
               </li>
             </ul>
           </span>
-
-          <p className="description">Descrição</p>
-          <p className="descriptionCMS">{therapies.attributes?.descricao}</p>
+          <div className="description">
+            <p className="text-title-description">Descrição</p>
+            {(
+              <div>
+                <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+                {therapies?.attributes?.descricao}
+                </ReactMarkdown>
+              </div>
+            )}
+          </div>
           {therapies.attributes?.url_agendamento !== null && (
             <a
               className="button-inscription"
diff --git a/src/pages/therapies-description/styled.js b/src/pages/therapies-description/styled.js
index cb01006..23cc759 100644
--- a/src/pages/therapies-description/styled.js
+++ b/src/pages/therapies-description/styled.js
@@ -39,18 +39,30 @@ const Details = styled.div`
     margin: 0 10vw;
   }
 
-  .description {
+  .text-title-description {
+    padding-bottom: 0.5em;
+    font-size: 1.875em;
     font-weight: bold;
-    font-size: 30px;
-    padding-top: 60px;
-    padding-bottom: 20px;
   }
 
-  .descriptionCMS {
-    font-size: 20px;
+  .description {
     text-align: justify;
-    width: 85%;
-    line-height: 23px;
+    padding-top: 6em;
+    font-size: 1.25em;
+    line-height: 1.3em;
+    width: 92%;
+  }
+
+  .description {
+    padding-top: 1em;
+    li {
+      padding-top: 0em;
+    }
+
+    p {
+    padding-top: 1em;
+
+    }
   }
 
   .button-close,
diff --git a/src/pages/workshop-description/index.js b/src/pages/workshop-description/index.js
index 84c5a86..93600ad 100644
--- a/src/pages/workshop-description/index.js
+++ b/src/pages/workshop-description/index.js
@@ -18,6 +18,8 @@ import 'swiper/css/navigation'
 import 'swiper/css/thumbs'
 import NavBar from '../../components/navbar'
 import { Link, useParams } from 'react-router-dom'
+import ReactMarkdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
 
 export const WorkshopDetails = () => {
   const [thumbsSwiper, setThumbsSwiper] = useState(null)
@@ -164,8 +166,16 @@ export const WorkshopDetails = () => {
               </li>
             </ul>
           </span>
-          <p className="description">Descrição</p>
-          <p className="descriptionCMS">{workshops.attributes?.descricao}</p>
+          <div className="description">
+            <p className="text-title-description">Descrição</p>
+            {(
+              <div className='descriptionCMS'>
+                <ReactMarkdown rehypePlugins={[rehypeRaw]}>
+                {workshops.attributes?.descricao}
+                </ReactMarkdown>
+              </div>
+            )}
+          </div>
           {workshops.attributes?.url_inscricao !== null && (
             <a
               className="button-inscription"
diff --git a/src/pages/workshop-description/styled.js b/src/pages/workshop-description/styled.js
index 41bd762..7a97fab 100644
--- a/src/pages/workshop-description/styled.js
+++ b/src/pages/workshop-description/styled.js
@@ -45,18 +45,30 @@ const Details = styled.div`
     margin: 10vh 10vw;
   }
 
-  .description {
+  .text-title-description {
+    padding-bottom: 0.5em;
+    font-size: 1.875em;
     font-weight: bold;
-    font-size: 30px;
-    padding-top: 60px;
-    padding-bottom: 20px;
   }
 
-  .descriptionCMS {
-    font-size: 20px;
+  .description {
     text-align: justify;
-    width: 90%;
-    line-height: 23px;
+    padding-top: 6em;
+    font-size: 1.25em;
+    line-height: 1.3em;
+    width: 92%;
+  }
+
+  .description {
+    padding-top: 1em;
+    li {
+      padding-top: 0em;
+    }
+
+    p {
+    padding-top: 1em;
+
+    }
   }
 
   .button-close,