feat: added new custom hook was created on toast

.vscode/tasks.json

@@ -0,0 +1,12 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "dev",
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    }
+  ]
+}

src/components/ModalConfirmation.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { IoWarningOutline } from 'react-icons/io5';
-// import { RiDeleteBin6Line } from 'react-icons/ri';
 import {
   Modal,
   ModalOverlay,
@@ -67,11 +66,6 @@ export function ModalConfirmation({
               isLoading={isPending}
               _hover={{ color: 'none' }}
             >
-              {/* <Icon
-                as={RiDeleteBin6Line}
-                boxSize='4'
-                mr='3'
-              /> */}
               Eliminar
             </Button>
             <Button

src/components/forms/FormEdit.tsx

@@ -14,21 +14,23 @@ import {
   Icon,
   Skeleton,
   FormErrorMessage,
-  useToast,
 } from '@chakra-ui/react';
 import pako from 'pako';
 import { useForm } from 'react-hook-form';
 import { Select } from 'chakra-react-select';
 import 'cropperjs/dist/cropper.css';
 import { AiOutlineSave } from 'react-icons/ai';
 import { BiImageAdd } from 'react-icons/bi';
+import { FaCheckCircle } from 'react-icons/fa';
+import { IoWarningSharp } from 'react-icons/io5';
 
 import { categories, formats, languages } from '../../data/links';
 import { BookType } from '@components/types';
 import { useUpdateBook } from '@hooks/querys';
 import { ModalCropper } from '@components/forms/ModalCropper';
 import { generatePathUrl, sortArrayByLabel } from '@utils/utils';
 import { MyPopover } from '@components/MyPopover';
+import { useMyToast } from '@hooks/useMyToast';
 const Cropper = lazy(() => import('react-cropper'));
 
 export function FormEdit({
@@ -53,7 +55,7 @@ export function FormEdit({
   const { url, public_id } = image;
   const navigate = useNavigate();
   const { isOpen, onOpen, onClose } = useDisclosure();
-  const toast = useToast();
+  const myToast = useMyToast();
   const bgColorInput = useColorModeValue('gray.100', 'gray.800');
   const bgColorButton = useColorModeValue('green.500', 'green.700');
   const [cropData, setCropData] = useState<string | null>(null);
@@ -261,28 +263,20 @@ export function FormEdit({
   }
 
   if (isSuccess) {
-    toast({
+    myToast({
       title: 'Guardado',
       description: 'Modificaciones guardadas exitosamente.',
-      status: 'success',
-      position: 'bottom-left',
-      isClosable: true,
-      containerStyle: {
-        fontFamily: 'sans-serif',
-      },
+      icon: FaCheckCircle,
+      bgColor: 'green.50',
     });
 
     navigate('/explore', { replace: true });
   } else if (error) {
-    toast({
+    myToast({
       title: 'Ha ocurrido un error',
       description: 'No se ha podido guardar las modificaciones.',
-      status: 'error',
-      position: 'bottom-left',
-      isClosable: true,
-      containerStyle: {
-        fontFamily: 'sans-serif',
-      },
+      icon: IoWarningSharp,
+      bgColor: 'red.400',
     });
   }
 

src/hooks/useMyToast.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import {
+  Box,
+  CloseButton,
+  Flex,
+  Icon,
+  // useColorModeValue,
+  useToast,
+} from '@chakra-ui/react';
+
+export function useMyToast() {
+  const toast = useToast();
+
+  function myToast({ bgColor, title, description, icon }) {
+    toast({
+      position: 'bottom-right',
+      containerStyle: {
+        fontFamily: 'sans-serif',
+      },
+      render: ({ onClose }) => (
+        <Flex color='black' p='2' bg={bgColor} rounded='lg' boxShadow='md'>
+          <Flex mt='1' p='2'>
+            <Icon as={icon} boxSize='5' mt='1' mr='2' />
+            <Flex direction='column'>
+              <Box fontWeight='semibold'>{title}</Box>
+              <Box>{description}</Box>
+            </Flex>
+          </Flex>
+          <CloseButton size='sm' onClick={onClose} />
+        </Flex>
+      ),
+    });
+  }
+
+  return myToast;
+}