Component texto informacoes

Criação e finalização do componente const TEXTOINFORMACOES: () => '/texto/informacoes', app <Route path={ROUTES.TEXTOINFORMACOES()} element={ } />

src/components/TextoInformacoes/ComponentTextoInformacoes.css

+.texto-informacoes-box {
+    overflow-y: scroll;
+    max-height: 300px;
+    scrollbar-width: thin;
+    scrollbar-color: #CECCCC #f0f0f0;
+  }
+.texto-informacoes-box {
+    align-items: center;
+    overflow-y: scroll;
+    max-height: 70%;
+    max-width: 90%;
+    margin-left: 5%;
+}
+.texto-informacoes-titulo {
+    max-width: 50%px;
+    white-space: normal;
+    font-family: Poppins;
+    font-size: 25px;
+    font-weight: 700;
+    line-height: 38px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #696969;
+}
+.texto-informacoes-previa {
+    max-width: 308px;
+    white-space: normal;
+    font-family: Poppins;
+    font-size: 14px;
+    font-style: italic;
+    font-weight: 500;
+    line-height: 21px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #888888;
+}
+.texto-informacoes-data-autor {
+    max-width: 308px;
+    white-space: normal;
+    font-family: Poppins;
+    font-size: 12px;
+    font-style: italic;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0em;
+    text-align: left;
+    font-family: Poppins;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #A3A3A3;
+}
+.texto-informacoes-texto {
+    max-width: 308px;
+    white-space: normal;
+    font-family: Poppins;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 23px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #888888;
+}
+.texto-titulo-referencia {
+    font-family: Poppins;
+    font-size: 17px;
+    font-weight: 700;
+    line-height: 26px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #696969;
+}
+.texto-informacoes-referencias {
+    max-width: 308px;
+    overflow-wrap: break-word; 
+    white-space: normal;
+    font-family: Poppins;
+    font-size: 13px;
+    font-style: italic;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0em;
+    text-align: left;
+    color: #888888;
+}
\ No newline at end of file

src/components/TextoInformacoes/TextoInformacoes.tsx

+import React from "react";
+import "./ComponentTextoInformacoes.css";
+
+interface TextoInformacoesProps {
+    titulo: string;
+    previa: string;
+    autor: string;
+    data: string;
+    texto: string;
+    referencias: string[];
+}
+
+const ComponentTextoInformacoes: React.FC<TextoInformacoesProps> = ({
+    titulo,
+    previa,
+    autor, //para quem  for fazer a integração, o molde do autor vai ser Dr.Nome (CRM/UF 123456)
+    data,
+    texto,
+    referencias,
+}) => {
+    return (
+        <div className="texto-informacoes-box">
+            <div className="texto-informacoes-titulo">{titulo}</div>
+
+            <div className="texto-informacoes-previa">{previa}</div>
+            <br />
+            <div className="texto-informacoes-data-autor">{data},{autor}</div>
+            <br />
+            <div className="texto-informacoes-texto">{texto}</div>
+            <br />
+            <div className="texto-titulo-referencia">Referências</div>
+            <br />
+            <div className="texto-informacoes-referencias" >{referencias.map(x => <a key={x} href={x}> {x} </a>)}</div>
+        </div>
+    );
+};
+
+export default ComponentTextoInformacoes;

src/pages/TextoInformacoes/TextoInformacoes.tsx

+import HeaderHome from '../../components/HeaderHome/HeaderHome';
+import Footer from '../../components/Footer/Footer';
+import ComponentTextoInformacoes from '../../components/TextoInformacoes/TextoInformacoes';
+
+
+const TextoInformacoes = () => {
+
+
+
+    return (
+        <>
+            <HeaderHome title="Informações" type="headerPage" />
+            <ComponentTextoInformacoes
+
+                titulo="Posso tomar banho de chuva?"
+                previa="O infectologista Francisco Ferrer explica que o frio e os dejetos em calhas e bicas podem apresentar riscos durante o banho"
+                autor=" Dr. João Silva (CRM/UF 123456)"
+                data="24/10/2023"
+                texto="Durante a quadra chuvosa, que acontece entre os meses de fevereiro e maio, é comum surgirem dúvidas sobre o banho de chuva e seus possíveis impactos à saúde. No entanto, como explica o médico infectologista Francisco Ferrer, do Hospital São José, em Fortaleza, “o banho de chuva propriamente dito não tem um risco diretamente associado”. Apesar de não existirem doenças relacionadas diretamente ao ato, o infectologista explica que, ao tomar banho na chuva, a temperatura corporal tende a diminuir, o que pode ocasionar uma queda da imunidade. Essa queda, coloca ele, “pode culminar em uma das infecções virais comuns nessa época, como as gripes e resfriados.” Uma dica do especialista para quem vai tomar banho de chuva é verificar o local de onde vem a água. Francisco orienta evitar pontos de drenagem de água como córregos onde acontece o esgotamento sanitário e dejetos são depositados. “Estes locais em si vão apresentar um risco maior, pela contaminação já existente”, afirma."
+
+                referencias={["https://www.opovo.com.br/noticias/saude/2023/03/03/banho-de-chuva-nao-faz-mal-a-saude-mas-requer-cuidados-com-contaminacao.html#:~:text=Para%20evitar%20doenças%20como%20a,nas%20ruas%20com%20a%20chuva.", "https://www.opovo.com.br/noticias/saude/2023/03/03/banho-de-chuva-nao-faz-mal-a-saude-mas-requer-cuidados-com-contaminacao.html#:~:text=Para%20evitar%20doenças%20como%20a,nas%20ruas%20com%20a%20chuva."]} />
+
+            <Footer user="patient" />
+        </>
+    );
+};
+
+export default TextoInformacoes;
\ No newline at end of file