#39 [feat] remove Slide e adiciona index.css

src/components/Alerta/index.tsx

@@ -2,6 +2,7 @@
 
 import { Alert, AlertTitle, IconButton, Button, Slide } from "@mui/material";
 import { useState, useEffect } from "react";
+import './index.css';
 
 interface AlertaProps {
   tipoFeedback: "success" | "info" | "warning" | "error"
@@ -40,53 +41,32 @@ export default function Alerta({
       <Button onClick={toggleAlert}>
         {showAlert ? 'Ocultar Alerta' : 'Mostrar Alerta'}
       </Button>
-      <Slide
-        direction="down"
-        in={showAlert}
-        mountOnEnter
-        unmountOnExit
-        timeout={500}
-      >
-        <div
+      <div className={`container-alert ${showAlert ? 'show' : 'hide'}`}>
+        <Alert
+          severity={tipoFeedback}
+          action={
+            <IconButton
+              aria-label="close"
+              color="inherit"
+              size="small"
+              onClick={toggleAlert}
+              style={{ alignSelf: 'center', margin: 'auto' }}
+            >
+              &times;
+            </IconButton>
+          }
           style={{
             display: "flex",
-            flexDirection: "column",
-            padding: "0.625rem",
-            maxWidth: "31.25rem",
             justifyContent: "center",
             alignItems: "center",
-            position: 'fixed',
-            top: '7%',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-            zIndex: 1000,
+            wordWrap: "break-word",
+            width: "100%"
           }}
         >
-          <Alert
-            severity={tipoFeedback}
-            action={
-              <IconButton
-                aria-label="close"
-                color="inherit"
-                size="small"
-                onClick={toggleAlert}
-                style={{ alignSelf: 'center', margin: 'auto' }}
-              >
-                &times;
-              </IconButton>
-            }
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              wordWrap: "break-word"
-            }}
-          >
-            <AlertTitle>{tituloFeedback}</AlertTitle>
-            {mensagemFeedback}
-          </Alert>
-        </div>
-      </Slide>
+          <AlertTitle>{tituloFeedback}</AlertTitle>
+          {mensagemFeedback}
+        </Alert>
+      </div>
     </>
   );
 }
\ No newline at end of file