Skip to content

Commit fc17cc8

Browse files
damarizzdamarizz
committed
feat: modal forms
1 parent 7d3590f commit fc17cc8

File tree

9 files changed

+440
-29
lines changed

9 files changed

+440
-29
lines changed

‎app/src/pages/Home/components/Button.module.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
.button {
22
border: none;
3-
border-radius: 0.75rem;
3+
border-radius: 0.5rem;
44
cursor: pointer;
55
font-weight: 600;
66
transition: background-color 0.2s ease-in-out;
77
}
88

99
.primary {
10-
background-color: #000;
10+
background-color: #18181B;
1111
color: #fff;
1212
}
1313

1414
.secondary {
1515
background-color: transparent;
1616
color: #000;
17-
border: 0.1px solid #010101;
17+
border: 0.1px solid #d3d3d3;
1818
}
1919

2020
.small {
2121
font-size: 0.875rem;
22-
padding: 0.5rem 1rem;
22+
padding: 0.5rem 0.5rem;
2323
}
2424

2525
.medium {
2626
font-size: 1rem;
27-
padding: 0.75rem 1.5rem;
27+
padding: 0.75rem 0.75rem;
2828
}
2929

3030
.large {
3131
font-size: 1.125rem;
32-
padding: 1rem 2rem;
32+
padding: 0.5rem 1.75rem;
3333
}
3434

3535
.button:hover {
36-
opacity: 0.9;
36+
opacity: 0.7;
3737
}

‎app/src/pages/Home/components/Header.module.css‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,31 @@
11
.header {
22
text-align: center;
3-
padding: 5rem 1rem;
3+
padding: 4rem 1rem;
44
}
55

66
.title {
77
font-size: 3rem;
88
font-weight: bold;
9-
margin-bottom: 1.5rem;
9+
margin-bottom: 1rem;
1010
}
1111

1212
.description {
1313
max-width: 48rem;
14-
margin: 0 auto 2rem;
15-
font-size: 1.125rem;
14+
margin: 0 auto 1.8rem;
15+
font-size: 1rem;
1616
color: #666;
1717
}
1818

1919
.buttonGroup {
2020
display: flex;
2121
gap: 1rem;
2222
justify-content: center;
23-
margin-bottom: 3rem;
23+
margin-bottom: 4rem;
24+
margin-top: 1rem;
2425
}
2526

2627
.imageContainer {
27-
max-width: 106.5rem;
28+
max-width: 80rem;
2829
margin: 0 auto;
2930
border-radius: 0.5rem;
3031
overflow: hidden;

‎app/src/pages/Home/components/Header.tsx‎

Lines changed: 240 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,253 @@
1+
import { useState } from 'react';
12
import Button from './Button';
23
import styles from './Header.module.css';
4+
import Popup from './PopUp/Popup';
5+
import popupStyles from './PopUp/Popup.module.css';
36

47
export const Header = () => {
8+
const [loginPopup, setLoginPopup] = useState(false);
9+
const [registerPopup, setRegisterPopup] = useState(false);
10+
const [loginStep, setLoginStep] = useState(1);
11+
const [registerStep, setRegisterStep] = useState(1);
12+
13+
const [username, setUsername] = useState('');
14+
const [email, setEmail] = useState('');
15+
const [password, setPassword] = useState('');
16+
const [address, setAddress] = useState('');
17+
const [postalCode, setPostalCode] = useState('');
18+
const [cardNumber, setCardNumber] = useState('');
19+
const [cvv, setCvv] = useState('');
20+
21+
const resetLoginFlow = () => {
22+
setLoginPopup(false);
23+
setLoginStep(1);
24+
};
25+
26+
const resetRegisterFlow = () => {
27+
setRegisterPopup(false);
28+
setRegisterStep(1);
29+
setUsername('');
30+
setEmail('');
31+
setPassword('');
32+
setAddress('');
33+
setPostalCode('');
34+
setCardNumber('');
35+
setCvv('');
36+
};
37+
538
return (
639
<header className={styles.header}>
740
<h1 className={styles.title}>Metagallery</h1>
841
<p className={styles.description}>
942
Crea tu propia galería virtual, exhibe tus obras o descubre las de otros artistas. Interactúa con una comunidad creativa, conecta con compradores interesados y transforma tu visión en una experiencia visual única. ¡Únete y lleva tus creaciones a un nuevo nivel de interacción!
1043
</p>
1144
<div className={styles.buttonGroup}>
12-
<Button variant="secondary" size="large">Iniciar sesión</Button>
13-
<Button variant="primary" size="large">Comienza ahora</Button>
45+
<Button variant="secondary" size="large" onClick={() => setLoginPopup(true)}>Iniciar sesión</Button>
46+
47+
<Popup trigger={loginPopup} setTrigger={resetLoginFlow}>
48+
{loginStep === 1 ? (
49+
<>
50+
<h3 className={popupStyles.title}>Inicio de sesión</h3>
51+
<p className={popupStyles.description}>Descubre tu experiencia Metagallery</p>
52+
<form onSubmit={(e) => { e.preventDefault(); setLoginStep(2); }}>
53+
<div className={popupStyles.formgroup}>
54+
<label className={popupStyles.label} htmlFor="username">
55+
Nombre de usuario
56+
</label>
57+
<input
58+
className={popupStyles.forminput}
59+
id="username"
60+
type="text"
61+
placeholder="Nombre de usuario"
62+
required
63+
/>
64+
</div>
65+
<div className={popupStyles.formgroup}>
66+
<label className={popupStyles.label} htmlFor="password">
67+
Contraseña
68+
</label>
69+
<input
70+
className={popupStyles.forminput}
71+
id="password"
72+
type="password"
73+
placeholder="Contraseña"
74+
required
75+
/>
76+
</div>
77+
<button className={popupStyles.button} type="submit">
78+
Ingresar
79+
</button>
80+
<div className={popupStyles.dividerContainer}>
81+
<div className={popupStyles.divider}></div>
82+
<span className={popupStyles.dividerText}>OR</span>
83+
<div className={popupStyles.divider}></div>
84+
</div>
85+
<button className={popupStyles.buttongoogle} type="button">
86+
Ingresar con Google
87+
</button>
88+
</form>
89+
</>
90+
) : (
91+
<>
92+
<h3 className={popupStyles.title}>Bienvenido de nuevo</h3>
93+
<p className={popupStyles.description}>Has iniciado sesión exitosamente.</p>
94+
<button className={popupStyles.button} onClick={resetLoginFlow}>
95+
Cerrar
96+
</button>
97+
</>
98+
)}
99+
</Popup>
100+
101+
<Button variant="primary" size="large" onClick={() => setRegisterPopup(true)}>Comienza ahora</Button>
102+
103+
<Popup trigger={registerPopup} setTrigger={resetRegisterFlow}>
104+
{registerStep === 1 ? (
105+
<>
106+
<h3 className={popupStyles.title}>Registro de usuario</h3>
107+
<p className={popupStyles.description}>Únete a una nueva forma de arte</p>
108+
<form onSubmit={(e) => { e.preventDefault(); setRegisterStep(2); }}>
109+
<div className={popupStyles.formgroup}>
110+
<label className={popupStyles.label} htmlFor="username">
111+
Nombre de usuario
112+
</label>
113+
<input
114+
className={popupStyles.forminput}
115+
id="username"
116+
type="text"
117+
placeholder="Nombre de usuario"
118+
value={username}
119+
onChange={(e) => setUsername(e.target.value)}
120+
required
121+
/>
122+
</div>
123+
<div className={popupStyles.formgroup}>
124+
<label className={popupStyles.label} htmlFor="mail">
125+
Correo electrónico
126+
</label>
127+
<input
128+
className={popupStyles.forminput}
129+
id="mail"
130+
type="email"
131+
placeholder="[email protected]"
132+
value={email}
133+
onChange={(e) => setEmail(e.target.value)}
134+
required
135+
/>
136+
</div>
137+
<div className={popupStyles.formgroup}>
138+
<label className={popupStyles.label} htmlFor="password">
139+
Contraseña
140+
</label>
141+
<input
142+
className={popupStyles.forminput}
143+
id="password"
144+
type="password"
145+
placeholder="Contraseña"
146+
value={password}
147+
onChange={(e) => setPassword(e.target.value)}
148+
required
149+
/>
150+
</div>
151+
<button className={popupStyles.button} type="submit">
152+
Siguiente
153+
</button>
154+
<div className={popupStyles.dividerContainer}>
155+
<div className={popupStyles.divider}></div>
156+
<span className={popupStyles.dividerText}>OR</span>
157+
<div className={popupStyles.divider}></div>
158+
</div>
159+
<button className={popupStyles.buttongoogle} type="button">
160+
Registrarse con Google
161+
</button>
162+
</form>
163+
</>
164+
) : registerStep === 2 ? (
165+
<>
166+
<h3 className={popupStyles.title}>Registro de usuario</h3>
167+
<p className={popupStyles.description}>Completa tus datos adicionales</p>
168+
<form onSubmit={(e) => {
169+
e.preventDefault();
170+
setRegisterStep(3);
171+
}}>
172+
<div className={popupStyles.formgroup}>
173+
<label className={popupStyles.label} htmlFor="address">
174+
Dirección
175+
</label>
176+
<input
177+
className={popupStyles.forminput}
178+
id="address"
179+
type="text"
180+
placeholder="Dirección de Domicilio"
181+
value={address}
182+
onChange={(e) => setAddress(e.target.value)}
183+
required
184+
/>
185+
</div>
186+
<div className={popupStyles.formgroup}>
187+
<label className={popupStyles.label} htmlFor="postalcode">
188+
Código Postal
189+
</label>
190+
<input
191+
className={popupStyles.forminput}
192+
id="postalcode"
193+
type="text"
194+
placeholder="Código Postal"
195+
value={postalCode}
196+
onChange={(e) => setPostalCode(e.target.value)}
197+
/>
198+
</div>
199+
<div className={popupStyles.formgroup}>
200+
<label className={popupStyles.label} htmlFor="card">
201+
Número de Tarjeta
202+
</label>
203+
<input
204+
className={popupStyles.forminput}
205+
id="card"
206+
type="text"
207+
placeholder="XXXX XXXX XXXX XXXX"
208+
value={cardNumber}
209+
onChange={(e) => setCardNumber(e.target.value)}
210+
required
211+
/>
212+
</div>
213+
<div className={popupStyles.formgroup}>
214+
<label className={popupStyles.label} htmlFor="cvv">
215+
CVV
216+
</label>
217+
<input
218+
className={popupStyles.forminput}
219+
id="cvv"
220+
type="text"
221+
placeholder="123"
222+
value={cvv}
223+
onChange={(e) => setCvv(e.target.value)}
224+
required
225+
/>
226+
</div>
227+
<div className={popupStyles.buttonContainer}>
228+
<button
229+
className={popupStyles.buttonBack}
230+
type="button"
231+
onClick={() => setRegisterStep(1)}
232+
>
233+
Atrás
234+
</button>
235+
<button className={popupStyles.buttonStart} type="submit">
236+
Comenzar
237+
</button>
238+
</div>
239+
</form>
240+
</>
241+
) : (
242+
<>
243+
<h3 className={popupStyles.title}>Bienvenido a Metagallery</h3>
244+
<p className={popupStyles.description}>Has creado tu cuenta exitosamente.</p>
245+
<button className={popupStyles.button} onClick={resetRegisterFlow}>
246+
Cerrar
247+
</button>
248+
</>
249+
)}
250+
</Popup>
14251
</div>
15252
<div className={styles.imageContainer}>
16253
<img
@@ -21,4 +258,4 @@ export const Header = () => {
21258
</div>
22259
</header>
23260
);
24-
};
261+
};

0 commit comments

Comments
 (0)