refs #854 Use chakra-ui alert context to get the status

vocdoni · Dec 3, 2024 · e2224f1 · e2224f1
1 parent 6665b7e
commit e2224f1
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@chakra-ui/alert": "2.2.2",
     "@chakra-ui/anatomy": "^2.3.4",
     "@chakra-ui/icons": "^2.2.4",
     "@chakra-ui/react": "~2.8.2",

diff --git a/src/components/Layout/AlertIconCustom.tsx b/src/components/Layout/AlertIconCustom.tsx
@@ -1,21 +1,19 @@
+import { useAlertContext } from '@chakra-ui/alert/dist/alert-context'
 import { AlertIconProps, chakra, useAlertStyles } from '@chakra-ui/react'
 import { cx } from '@chakra-ui/utils'
 import { FaRegCheckCircle } from 'react-icons/fa'
 import { RiErrorWarningLine } from 'react-icons/ri'
 
-interface AlertIconCustomProps extends AlertIconProps {
-  status: string
-}
-
 const icons = {
   info: <RiErrorWarningLine />,
   warning: <RiErrorWarningLine />,
   success: <RiErrorWarningLine />,
   error: <FaRegCheckCircle />,
 }
 
-export const AlertIcon = ({ status = 'info', ...props }: AlertIconCustomProps) => {
+export const AlertIcon = (props: AlertIconProps) => {
   const styles = useAlertStyles()
+  const { status } = useAlertContext()
   const css = status === 'loading' ? styles.spinner : styles.icon
 
   const IconComponent = icons[status] || <RiErrorWarningLine />