SrJuggernaut/entgamers_pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: static equipo unirse

Browse Source
This commit is contained in:
SrJuggernaut
2024-01-03 15:03:08 -06:00
parent ba466dfd80
commit b393e0cdb0
8 changed files with 278 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/equipo/page.tsx
+14 -27
View File
@@ -1,34 +1,12 @@
import Typography from '@/components/ui/Typography'
import { css, cx } from '@/styled-system/css'
import { css } from '@/styled-system/css'
import { Container } from '@/styled-system/jsx'
import { center } from '@/styled-system/patterns'
import { button, card, iconButton } from '@/styled-system/recipes'
import { type TeamMember } from '@/types/User'
import { faFacebook, faInstagram, faTwitch, faTwitter, faYoutube } from '@fortawesome/free-brands-svg-icons'
import { faGlobe } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import NextImage from 'next/image'
import { button } from '@/styled-system/recipes'
import NextLink from 'next/link'
import { type FC } from 'react'
const team: TeamMember[] = [
{
image: '/images/team/SrJuggernaut.png',
name: 'SrJuggernaut',
role: 'administrator',
description: 'Soy desarrollador web y me gusta jugar videojuegos.',
socialNetworks: [
{ url: 'https://www.facebook.com/SrJuggernaut', label: 'SrJuggernaut Facebook', icon: faFacebook },
{ url: 'https://twitter.com/SrJuggernaut', label: 'SrJuggernaut Twitter', icon: faTwitter },
{ url: 'https://youtube.com/juggernautplays', label: 'SrJuggernaut YouTube', icon: faYoutube },
{ url: 'https://twitch.tv/juggernautplays', label: 'SrJuggernaut Twitch', icon: faTwitch },
{ url: 'https://www.instagram.com/sr_juggernaut', label: 'SrJuggernaut Instagram', icon: faInstagram },
{ url: 'https://srjuggernaut.dev/', label: 'SrJuggernaut Website', icon: faGlobe }
]
}
]
const EquipoPage: FC = () => {
const EquipoPage: FC = async () => {
return (
<Container>
<Typography variant="h1" align="center">Equipo</Typography>
@@ -49,7 +27,7 @@ const EquipoPage: FC = () => {
flexWrap: 'wrap'
})}
>
{team.map((member, index) => (
{/* {team.map((member, index) => (
<div
key={`team-member-${index}`}
className={cx(card({ variant: 'retro' }).body, css({
@@ -92,8 +70,17 @@ const EquipoPage: FC = () => {
</div>
</div>
</div>
))}
))} */}
</Container>
<div className={center()}>
<NextLink
className={button({ color: 'info' })}
href="/equipo/unirse?role=administrator"
>
¡Quiero ser administrador!
</NextLink>
</div>
<Typography variant="h2" align="center">Moderadores</Typography>
<Typography variant="body1">
Los moderadores son los encargados de mantener el orden en los grupos de la comunidad, así como de ayudar a los usuarios a resolver sus dudas.
src/app/equipo/unirse/ApplyForm.tsx
+156 -83
View File
@@ -1,19 +1,25 @@
'use client'
import Alert from '@/components/ui/Alert'
import Button from '@/components/ui/Button'
import Typography from '@/components/ui/Typography'
import FormGroup from '@/components/ui/form/FormGroup'
import Input from '@/components/ui/form/Input'
import TextArea from '@/components/ui/form/TextArea'
import { createTeamApply } from '@/services/frontend/teamApply'
import { css } from '@/styled-system/css'
import { type Alert as AlertType } from '@/types/feedback'
import { type TeamApplyData } from '@/types/teamApply'
import { faChevronRight } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { FontAwesomeIcon, type FontAwesomeIconProps } from '@fortawesome/react-fontawesome'
import { AppwriteException } from 'appwrite'
import { useFormik } from 'formik'
import { AnimatePresence, motion } from 'framer-motion'
import { useSearchParams } from 'next/navigation'
import { useEffect, type FC } from 'react'
import { useEffect, useState, type FC } from 'react'
const ApplyForm: FC = () => {
const searchParams = useSearchParams()
const [alert, setAlert] = useState<AlertType | undefined>(undefined)
const formik = useFormik<TeamApplyData>({
initialValues: {
@@ -23,8 +29,25 @@ const ApplyForm: FC = () => {
message: '',
role: 'administrator'
},
onSubmit: (values) => {
console.log(values)
onSubmit: async (values) => {
try {
await createTeamApply(values)
} catch (error) {
if (error instanceof AppwriteException) {
setAlert({
title: 'Error al enviar el formulario',
message: error.message,
severity: 'error'
})
return
}
console.error('Error al enviar el formulario', error)
setAlert({
severity: 'error',
title: 'Error al enviar el formulario',
message: 'Hubo un error al enviar el formulario, por favor, intenta nuevamente.'
})
}
}
})
useEffect(() => {
@@ -92,77 +115,126 @@ const ApplyForm: FC = () => {
gap: 'medium'
})}
>
<div
className={css({
order: { base: 2, md: 1 }
})}
>
<FormGroup>
<label htmlFor='name'>Nombre</label>
<Input
id='name'
type='text'
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.name !== undefined && formik.errors.name !== undefined && (
<Typography variant='caption' color='danger'>
{formik.errors.name}
</Typography>
)}
</FormGroup>
<FormGroup>
<label htmlFor='email'>Email</label>
<Input
id='email'
type='email'
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email !== undefined && formik.errors.email !== undefined && (
<Typography variant='caption' color='danger'>
{formik.errors.email}
</Typography>
)}
</FormGroup>
<FormGroup>
<label htmlFor='discordName'>Nombre de Discord</label>
<Input
id='discordName'
type='text'
value={formik.values.discordName}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.discordName !== undefined && formik.errors.discordName !== undefined && (
<Typography variant='caption' color='danger'>
{formik.errors.discordName}
</Typography>
)}
</FormGroup>
<FormGroup>
<label htmlFor='message'>Mensaje</label>
<Input
id='message'
type='text'
value={formik.values.message}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.message !== undefined && formik.errors.message !== undefined && (
<Typography variant='caption' color='danger'>
{formik.errors.message}
</Typography>
)}
</FormGroup>
<Button
type='submit'
{alert !== undefined && (
<Alert
severity={alert.severity}
>
Enviar
</Button>
</div>
{alert.title !== undefined && (
<Typography variant='h5' component='div'>{alert.title}</Typography>
)}
{alert.message}
</Alert>
)}
{formik.submitCount > 0 && (
<div
className={css({
order: { base: 2, md: 1 }
})}
>
<FormGroup>
<label htmlFor='name'>Nombre</label>
<Input
id='name'
type='text'
value={formik.values.name}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.name !== undefined && formik.errors.name !== undefined
? (
<Typography variant='caption' color='danger'>
{formik.errors.name}
</Typography>
)
: (
<Typography variant='caption' color='info'>
Tu nombre.
</Typography>
)}
</FormGroup>
<FormGroup>
<label htmlFor='email'>Email</label>
<Input
id='email'
type='email'
value={formik.values.email}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.email !== undefined && formik.errors.email !== undefined
? (
<Typography variant='caption' color='danger'>
{formik.errors.email}
</Typography>
)
: (
<Typography variant='caption' color='info'>
Tu email, para poder contactarte.
</Typography>
)
}
</FormGroup>
<FormGroup>
<label htmlFor='discordName'>Nombre de Discord</label>
<Input
id='discordName'
type='text'
value={formik.values.discordName}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.discordName !== undefined && formik.errors.discordName !== undefined
? (
<Typography variant='caption' color='danger'>
{formik.errors.discordName}
</Typography>
)
: (
<Typography variant='caption' color='info'>
Tu nombre de Discord, para poder contactarte.
</Typography>
)
}
</FormGroup>
<FormGroup>
<label htmlFor='message'>Mensaje</label>
<TextArea
id='message'
value={formik.values.message}
onChange={formik.handleChange}
onBlur={formik.handleBlur}
/>
{formik.touched.message !== undefined && formik.errors.message !== undefined
? (
<Typography variant='caption' color='danger'>
{formik.errors.message}
</Typography>
)
: (
<Typography variant='caption' color='info'>
¿Por que te gustaría unirte al equipo?, ¿Que te gustaría hacer?, etc.
</Typography>
)
}
</FormGroup>
<div
className={css({
paddingBlock: 'medium'
})}
>
<Button
type='submit'
disabled={!formik.isValid || !formik.dirty}
fullWidth
>
Enviar
</Button>
</div>
</div>
)
}
<div
className={css({
overflow: 'hidden',
@@ -186,7 +258,7 @@ const ApplyForm: FC = () => {
<Typography variant='h3'>Requisitos</Typography>
<ul className="fa-ul">
<li>
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Imparcialidad</strong>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Imparcialidad</strong>
<br />
La comunidad esta conformada por amigos y conocidos, por lo tanto es importante poder actuar de forma imparcial y responsable.
</li>
@@ -194,7 +266,7 @@ const ApplyForm: FC = () => {
<Typography variant='h3'>Beneficios</Typography>
<ul className="fa-ul">
<li>
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Experiencia</strong>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Experiencia</strong>
<br />
Uno de los objetivos de la comunidad es brindar experiencia en gestión y desarrollo de proyectos equiparable a un entorno laboral, que sea comprobable y útil.
</li>
@@ -216,7 +288,7 @@ const ApplyForm: FC = () => {
<Typography variant='h3'>Requisitos</Typography>
<ul className="fa-ul">
<li>
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Profesionalismo</strong>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Profesionalismo</strong>
<br />
La comunidad siempre intenta conseguir el mayor nivel de calidad en todos sus proyectos, por lo que buscamos gente dispuesta a otorgar este nivel de profesionalismo para el disfrute de la comunidad.
</li>
@@ -224,7 +296,7 @@ const ApplyForm: FC = () => {
<Typography variant='h3'>Beneficios</Typography>
<ul className="fa-ul">
<li>
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Apoyo</strong>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Apoyo</strong>
<br />
Puedes contar con el apoyo de la comunidad para tus proyectos, ya sea en forma de difusión, asesoramiento o recursos.
</li>
@@ -246,17 +318,17 @@ const ApplyForm: FC = () => {
<Typography variant='h3'>Requisitos</Typography>
<ul className="fa-ul">
<li>
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Profesionalismo</strong>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Profesionalismo</strong>
<br />
La comunidad siempre intenta conseguir el mayor nivel de calidad en todos sus proyectos, por lo que buscamos gente dispuesta a otorgar este nivel de profesionalismo para el disfrute de la comunidad.
</li>
<li>
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Constancia</strong>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Constancia</strong>
<br />
La comunidad busca gente que en sus posibilidades sea activa, que pueda estar al tanto de lo que pasa en ella.
</li>
<li>
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Proactividad</strong>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Proactividad</strong>
<br />
La comunidad esta en constante crecimiento, por eso, buscamos gente que ayude a buscar nuevas oportunidades para diferentes proyectos y actividades de interés a la comunidad.
</li>
@@ -264,12 +336,12 @@ const ApplyForm: FC = () => {
<Typography variant='h3'>Beneficios</Typography>
<ul className="fa-ul">
<li>
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Experiencia</strong>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Experiencia</strong>
<br />
Uno de los objetivos de la comunidad es brindar experiencia en gestión y desarrollo de proyectos equiparable a un entorno laboral, que sea comprobable y útil.
</li>
<li>
<FontAwesomeIcon icon={faChevronRight} fixedWidth listItem /> <strong>Capacitación</strong>
<FontAwesomeIcon icon={faChevronRight as FontAwesomeIconProps['icon']} fixedWidth listItem /> <strong>Capacitación</strong>
<br />
La comunidad buscara dar capacitación a sus miembros en lo referido a herramientas y procedimientos utilizados.
</li>
@@ -283,4 +355,5 @@ const ApplyForm: FC = () => {
</form>
)
}
export default ApplyForm