feat: nextjs 14 (#20)

* 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
2024-07-30 18:23:15 -06:00
parent 14b52a7800
commit 8802b0fd68
175 changed files with 4485 additions and 8638 deletions
@@ -0,0 +1,78 @@
+'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