FormMessage.tsx 799 B

1234567891011121314151617181920212223242526272829303132
  1. import { AnimatePresence, motion } from 'framer-motion'
  2. import { Admonition } from 'ui-patterns'
  3. interface FormMessageProps {
  4. message: string
  5. type?: 'error' | 'success'
  6. children?: React.ReactNode
  7. }
  8. function FormMessage({ message = 'error', type, children }: FormMessageProps) {
  9. return (
  10. <AnimatePresence>
  11. {message && (
  12. <motion.div
  13. initial={{ opacity: 0, height: 0 }}
  14. animate={{ opacity: 1, height: 'auto' }}
  15. exit={{ opacity: 0, height: 0 }}
  16. >
  17. <Admonition
  18. type={type === 'error' ? 'destructive' : 'default'}
  19. className="mt-2"
  20. title={message}
  21. >
  22. {children}
  23. </Admonition>
  24. </motion.div>
  25. )}
  26. </AnimatePresence>
  27. )
  28. }
  29. export default FormMessage