SrJuggernaut
8802b0fd68
* feat: eslint update * feat: start over and layout * feat: nextjs13 boilerplate * feat: static homepage * feat: static pages * feat: static unirse * chore: remove old mui types * chore: moving from yarn to bun * chore: update dependencies * feat: static equipo unirse * feat: move appwrite to entgamers-database package * feat: improve ui components * feat: update dependencies * feat: static login & register pages * fix: remove unused logs * feat: state redux toolkit & feedback slice * fix: equipo div inside p * feat: session * feat: metadataBase * feat: basic apply form * feat: http verbs * feat: recover password flow * chore: updated dependencies * fix: fix image config * fix: api team-applications route * fix: remove not longer used fonts * feat: session with current user * fix: login form recuperar contraseña * feat: equipo pages now uses data from database package * feat: useManageErrors hook * feat: updated cuenta page * chore: updated old formik forms to use hooks * feat: updated dependencies &package name * fix: session related bugs * fix: missing helper texts * feat: static applications dashboard * chore: update dependencies * refactor: team applications * fix: session api update
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
|