Refactor SnackbarIndicator

src/components/SnackbarIndicator/index.js

@@ -1,8 +1,11 @@
 import { useState, useEffect, forwardRef } from 'react';
 import { Snackbar, Alert } from '@mui/material';
 
+import styles from './styles';
+
 function SnackbarIndicator({ isOpen, severity, message }) {
   const [open, setOpen] = useState(false);
+  const { snackbarContainer, customAlert } = styles;
 
   useEffect(() => {
     setOpen(isOpen);
@@ -16,12 +19,12 @@ function SnackbarIndicator({ isOpen, severity, message }) {
 
   return (
     <Snackbar
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
+      anchorOrigin={snackbarContainer}
       open={open}
       autoHideDuration={5000}
       onClose={onClose}
     >
-      <CustomAlert onClose={onClose} severity={severity} sx={{ width: '100%' }}>
+      <CustomAlert onClose={onClose} severity={severity} sx={customAlert}>
         {message}
       </CustomAlert>
     </Snackbar>

src/components/SnackbarIndicator/styles.js

@@ -0,0 +1,11 @@
+const snackbarContainer = {
+  vertical: 'bottom',
+  horizontal: 'center',
+};
+
+const customAlert = {
+  width: '100%',
+};
+
+const styles = { snackbarContainer, customAlert };
+export default styles;