Finalizando a descricao das paginas com descricao

aceleradora-TW · Feb 1, 2024 · 5827eb8 · 5827eb8
1 parent d810c4e
commit 5827eb8
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,