Skip to content

Commit

Permalink
loading page added
Browse files Browse the repository at this point in the history
  • Loading branch information
@aridane-secretsource
aridane-secretsource committed Jul 10, 2022
1 parent 9fb3cb0 commit a2d1dc6
Show file tree
Hide file tree
Showing 5 changed files with 220 additions and 106 deletions.
241 changes: 137 additions & 104 deletions components/ContactForm/ContactForm.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from "react";
import styles from "./ContactForm.module.scss";
import { useForm } from "hooks/useForm";
import Image from "next/image";
import useTranslation from "next-translate/useTranslation";
import ratonesLogo from "../../public/images/logoLarge.webp";

const initialForm = {
name: "",
Expand Down Expand Up @@ -53,117 +55,148 @@ export const ContactForm = () => {
handleBlur,
handleCheckbox,
handleSubmit,
success,
} = useForm(initialForm, validationsForm);

return (
<div className={styles.contactFormWrapper}>
<div className={styles.contactForm}>
<div className={styles.imageWrapper}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3038.49697429807!2d-3.6859413999999995!3d40.397839999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42263e9c7ff531%3A0xea709ef82282a29a!2sC.%20de%20Juan%20de%20Mariana%2C%2012%2C%2028045%20Madrid!5e0!3m2!1ses!2ses!4v1655287470616!5m2!1ses!2ses"
width="100%"
height="100%"
loading="lazy"
></iframe>
</div>
{loading ? (
<h1>'hi'</h1>
) : (
<form
ref={form}
onSubmit={(e) => handleSubmit(e)}
className={styles.formWrapper}
>
<h1>{t("common:contactForm.title")}</h1>
<label className={styles.primaryLabel}>
{t("common:contactForm.name")}
</label>
<input
type="text"
name="name"
onChange={handleChange}
onBlur={handleBlur}
/>
<p className={styles.fieldError}>{errors.name}</p>
<label className={styles.primaryLabel}>
{t("common:contactForm.email")}
</label>
<input
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
{loading ? (
<div className={styles.loading}>
<p>{t("common:contactForm.loading")}</p>
<div className={styles.logoWrap}>
<Image
src={ratonesLogo}
layout="responsive"
quality="50"
priority="true"
as="image"
/>
<p className={styles.fieldError}>{errors.email}</p>
<label className={styles.primaryLabel}>
{t("common:contactForm.message")}
</label>
<textarea
name="message"
onChange={handleChange}
onBlur={handleBlur}
placeholder={t("common:contactForm.messagePlaceholder")}
/>
<p className={styles.fieldError}>{errors.message}</p>
<fieldset>
<legend>{t("common:contactForm.servicesDescription")}</legend>
<div className={styles.checkboxWrapper}>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="produccion">
{t("common:servicios.0")}
</label>
<input
type="checkbox"
id="produccion"
name="produccion"
onChange={handleCheckbox}
/>
</div>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="grabacion">
{t("common:servicios.1")}
</label>
<input
type="checkbox"
id="grabacion"
name="grabacion"
onChange={handleCheckbox}
/>
</div>
<div className={styles.checkbox}>
<label
className={styles.secondaryLabel}
htmlFor="audiovisuales"
>
{t("common:servicios.2")}
</label>
<input
type="checkbox"
id="audiovisuales"
onChange={handleCheckbox}
name="audiovisuales"
/>
</div>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="mezcla">
{t("common:servicios.3")}
</label>
<input
type="checkbox"
id="mezcla"
name="mezcla"
onChange={handleCheckbox}
/>
</div>
</div>
) : (
<>
<div className={styles.contactForm}>
<div className={styles.imageWrapper}>
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3038.49697429807!2d-3.6859413999999995!3d40.397839999999995!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd42263e9c7ff531%3A0xea709ef82282a29a!2sC.%20de%20Juan%20de%20Mariana%2C%2012%2C%2028045%20Madrid!5e0!3m2!1ses!2ses!4v1655287470616!5m2!1ses!2ses"
width="100%"
height="100%"
loading="lazy"
></iframe>
</div>
<form
ref={form}
onSubmit={(e) => handleSubmit(e)}
className={styles.formWrapper}
>
<h1>{t("common:contactForm.title")}</h1>
{success && (
<p className={styles.success}>
&#10003; {t("common:contactForm.success")}
</p>
)}
<label className={styles.primaryLabel}>
{t("common:contactForm.name")}
</label>
<input
type="text"
name="name"
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.name && (
<p className={styles.fieldError}>{errors.name}</p>
)}
<label className={styles.primaryLabel}>
{t("common:contactForm.email")}
</label>
<input
type="email"
name="email"
onChange={handleChange}
onBlur={handleBlur}
/>
{errors.email && (
<p className={styles.fieldError}>{errors.email}</p>
)}
<label className={styles.primaryLabel}>
{t("common:contactForm.message")}
</label>
<textarea
name="message"
onChange={handleChange}
onBlur={handleBlur}
placeholder={t("common:contactForm.messagePlaceholder")}
/>
{errors.message && (
<p className={styles.fieldError}>{errors.message}</p>
)}
<fieldset>
<legend>{t("common:contactForm.servicesDescription")}</legend>
<div className={styles.checkboxWrapper}>
<div className={styles.checkbox}>
<label
className={styles.secondaryLabel}
htmlFor="produccion"
>
{t("common:servicios.0")}
</label>
<input
type="checkbox"
id="produccion"
name="produccion"
onChange={handleCheckbox}
/>
</div>
<div className={styles.checkbox}>
<label
className={styles.secondaryLabel}
htmlFor="grabacion"
>
{t("common:servicios.1")}
</label>
<input
type="checkbox"
id="grabacion"
name="grabacion"
onChange={handleCheckbox}
/>
</div>
<div className={styles.checkbox}>
<label
className={styles.secondaryLabel}
htmlFor="audiovisuales"
>
{t("common:servicios.2")}
</label>
<input
type="checkbox"
id="audiovisuales"
onChange={handleCheckbox}
name="audiovisuales"
/>
</div>
<div className={styles.checkbox}>
<label className={styles.secondaryLabel} htmlFor="mezcla">
{t("common:servicios.3")}
</label>
<input
type="checkbox"
id="mezcla"
name="mezcla"
onChange={handleCheckbox}
/>
</div>
</div>
</div>
</fieldset>
</fieldset>

<button type="submit" onClick={handleSubmit}>
{t("common:contactForm.send")}
</button>
</form>
)}
</div>
<button type="submit" onClick={handleSubmit}>
{t("common:contactForm.send")}
</button>
</form>
</div>
</>
)}
</div>
);
};
74 changes: 74 additions & 0 deletions components/ContactForm/ContactForm.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,48 @@
url(../../public/images/guitarBackground3.webp);
background-size: cover;
background-blend-mode: darken;

.loading {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: rgba(0, 0, 0, 0.5);

animation-name: parpadeo;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
p {
text-align: center;
padding: 0rem 1rem;
font-size: 1.4rem;
color: white;
}

.logoWrap {
opacity: 0.5;
position: relative;
min-width: 12rem;
max-width: 15rem;
}
}

@keyframes parpadeo {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
}

.backgroundWrapper {
position: relative;
width: 100%;
Expand Down Expand Up @@ -51,6 +92,27 @@
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;

.success {
color: white;
font-weight: bold;
background-color: green;
font-size: 1.2rem;
padding: 1rem 0rem;
margin-bottom: 1rem;
padding: 1rem;

animation: fadeIn 2s;
}

@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

input,
textarea {
width: 100%;
Expand Down Expand Up @@ -155,12 +217,24 @@

h1 {
margin-top: 5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #ccc;
}

.formWrapper {
background: #161111;
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
url(../../public/images/guitarBackground4.webp);
background-position: center;
background-size: cover;

color: white;
height: fit-content;
}
.fieldError {
padding: 0.5rem;
color: white;
background: #834d26c7;
}
}
}
3 changes: 3 additions & 0 deletions hooks/useForm.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ export const useForm = (initialForm, validateForm) => {
const [form, setForm] = useState(initialForm);
const [errors, setErrors] = useState({});
const [loading, setLoading] = useState(false);
const [success, setSuccess] = useState(false);

const handleChange = (e) => {
const { name, value } = e.target;
Expand Down Expand Up @@ -52,6 +53,7 @@ export const useForm = (initialForm, validateForm) => {

setLoading(true);
setTimeout(() => setLoading(false), 5000);
setSuccess(true);
setTimeout(
() =>
setForm({
Expand All @@ -71,6 +73,7 @@ export const useForm = (initialForm, validateForm) => {
};

return {
success,
form,
errors,
loading,
Expand Down
4 changes: 3 additions & 1 deletion locales/en/common.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@
"message": "Message",
"messagePlaceholder": "Write your message here and we will contact you as soon as possible.",
"servicesDescription": "Select the services you may be interested in:",
"send": "Send"
"send": "Send",
"loading": "Your message is being sent...",
"success": "Your message has been sent successfully."
}
}
Loading

1 comment on commit a2d1dc6

@vercel
Copy link

@vercel vercel bot commented on a2d1dc6 Jul 10, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

ratones-nextjs – ./

ratones-nextjs.vercel.app
ratones-nextjs-aridanemartin.vercel.app
ratones-nextjs-git-main-aridanemartin.vercel.app
www.ratonesroom.com
ratonesroom.com

Please sign in to comment.