79 lines
3.2 KiB
TypeScript
79 lines
3.2 KiB
TypeScript
'use client'
|
|
import IconButton from '@/components/ui/IconButton'
|
|
import Typography from '@/components/ui/Typography'
|
|
import { useAppDispatch } from '@/hooks/useAppDispatch'
|
|
import { useAppSelector } from '@/hooks/useAppSelector'
|
|
import { removeAlert } from '@/state/feedbackSlice'
|
|
import { css } from '@/styled-system/css'
|
|
import { alert } from '@/styled-system/recipes/alert'
|
|
import { faTimes } from '@fortawesome/free-solid-svg-icons'
|
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
|
import { AnimatePresence, motion } from 'framer-motion'
|
|
import { type FC } from 'react'
|
|
import { createPortal } from 'react-dom'
|
|
|
|
const FeedbackConsumer: FC = () => {
|
|
const { alerts } = useAppSelector((state) => state.feedback)
|
|
const dispatch = useAppDispatch()
|
|
return (
|
|
<>
|
|
{alerts.length > 0 && createPortal(
|
|
(
|
|
<AnimatePresence>
|
|
<motion.div
|
|
key="alerts"
|
|
className={css({
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: 'medium',
|
|
position: 'fixed',
|
|
bottom: 'medium',
|
|
left: 'medium',
|
|
padding: 'medium',
|
|
zIndex: 'modalBackdrop',
|
|
width: 'calc(100vw - 32px)',
|
|
maxWidth: '400px'
|
|
})}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1, y: 0, transition: { duration: 0.3, ease: 'backIn' } }}
|
|
exit={{ opacity: 0, x: 400, transition: { duration: 0.3, ease: 'backOut' } }}
|
|
>
|
|
<AnimatePresence>
|
|
{alerts.map((currentAlert) => (
|
|
<motion.div
|
|
key={currentAlert.id}
|
|
// This is a workaround for PandaCSS to auto-generate styles and avoid Alerts with non-generated styles. See https://panda-css.com/docs/guides/dynamic-styling#runtime-conditions
|
|
className={alert({
|
|
severity: currentAlert.severity === 'success' ? 'success' : currentAlert.severity === 'info' ? 'info' : currentAlert.severity === 'warning' ? 'warning' : currentAlert.severity === 'error' ? 'error' : undefined
|
|
}).body}
|
|
initial={{ opacity: 0, y: 50 }}
|
|
animate={{ opacity: 1, y: 0, transition: { duration: 0.3, ease: 'backIn' } }}
|
|
exit={{ opacity: 0, x: 400, transition: { duration: 0.3, ease: 'backOut' } }}
|
|
>
|
|
<IconButton
|
|
size="small"
|
|
className={alert().closeButton}
|
|
onClick={() => dispatch(removeAlert(currentAlert.id))}
|
|
>
|
|
<FontAwesomeIcon icon={faTimes} fixedWidth size="sm" />
|
|
</IconButton>
|
|
<Typography variant="h3" component="div">
|
|
{currentAlert.title}
|
|
</Typography>
|
|
<Typography variant="body1">
|
|
{currentAlert.message}
|
|
</Typography>
|
|
</motion.div>
|
|
))}
|
|
</AnimatePresence>
|
|
</motion.div>
|
|
</AnimatePresence>
|
|
),
|
|
document.body,
|
|
'alerts'
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
export default FeedbackConsumer
|