cainamilech/desafio-react-e-typescript-caina
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feature/main #4

Merged
cainamilech merged 4 commits from feature/main into develop 2023-01-11 01:35:01 +00:00
Conversation 0 Commits 4 Files Changed 9 +130 -43
9 changed files with 130 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
react-project/src/components/FixedIcons/FixedIcons.tsx Normal file
View File

@ -0,0 +1,30 @@
import icons from "./assets/modules/FixedIcons.module.scss";
import whats from "./assets/svgs/whatsapp.svg";
import arrow from "./assets/svgs/arrow.svg";
const FixedIcons = () => {
return (
<div className={icons["icons"]}>
<a
href="https://wa.me/5521912345678"
target="_blank"
className={icons["icons__whats"]}
>
<figure>
<img src={whats} alt="Ícone WhatsApp" />
</figure>
</a>
<div
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
className={icons["icons__arrow"]}
>
<figure>
<img src={arrow} alt="Ícone subir ao topo" />
</figure>
</div>
</div>
);
};
export { FixedIcons };

61
react-project/src/components/FixedIcons/assets/modules/FixedIcons.module.scss Normal file
View File

@ -0,0 +1,61 @@
.icons {
position: fixed;
bottom: 200px;
right: 16px;
@media screen and (min-width: 2500px) {
bottom: 215px;
}
@media screen and (max-width: 1024px) {
bottom: 50px;
}
@media screen and (max-width: 599px) {
bottom: 29px;
}
&__whats {
display: contents;
figure {
display: contents;
img {
@media screen and (min-width: 2500px) {
width: 66px;
height: 66px;
}
}
}
}
&__arrow {
margin-top: 5px;
background-color: var(--gray-100);
width: 34px;
height: 34px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
figure {
display: contents;
img {
transform: translateY(-2px);
}
}
@media screen and (min-width: 2500px) {
width: 66px;
height: 66px;
img {
width: 26px;
}
}
}
}

3
react-project/src/components/FixedIcons/assets/svgs/arrow.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="13" height="7" viewBox="0 0 13 7" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.6 6.13647C12.5989 6.24898 12.5519 6.36118 12.4588 6.44888L12.4587 6.44902C12.2574 6.63896 11.9216 6.63894 11.7204 6.44903L11.7204 6.44902L6.7744 1.78259L6.4999 1.5236L6.2254 1.78259L1.27968 6.44882C1.27966 6.44884 1.27964 6.44886 1.27962 6.44888C1.07811 6.63886 0.742449 6.63877 0.541181 6.44888L0.541122 6.44882C0.448342 6.36133 0.401297 6.24944 0.400026 6.13719C0.401078 6.02468 0.448119 5.91242 0.541189 5.82462L0.541192 5.82461L6.13082 0.550956C6.13085 0.550933 6.13087 0.55091 6.13089 0.550887C6.22923 0.458193 6.36162 0.408533 6.49988 0.408533C6.63821 0.408533 6.77079 0.458327 6.86907 0.55102C6.86908 0.551029 6.86909 0.551037 6.8691 0.551047L12.4587 5.82475L12.4588 5.82482C12.5516 5.9124 12.5987 6.02428 12.6 6.13647Z" fill="white" stroke="white" stroke-width="0.8"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 891 B

11
react-project/src/components/FixedIcons/assets/svgs/whatsapp.svg Normal file
View File

@ -0,0 +1,11 @@
<svg width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3403_1267)">
<path d="M17.0042 0H16.9958C7.62238 0 0 7.6245 0 17C0 20.7188 1.1985 24.1655 3.23638 26.9641L1.11775 33.2796L7.65213 31.1908C10.3403 32.9715 13.5469 34 17.0042 34C26.3776 34 34 26.3734 34 17C34 7.62663 26.3776 0 17.0042 0Z" fill="#4CAF50"/>
<path d="M26.8961 24.0061C26.486 25.1642 24.8582 26.1247 23.5599 26.4052C22.6716 26.5944 21.5114 26.7452 17.6056 25.126C12.6097 23.0562 9.39249 17.9796 9.14174 17.6502C8.90161 17.3209 7.12299 14.9621 7.12299 12.5226C7.12299 10.0831 8.36186 8.89524 8.86124 8.38524C9.27136 7.96662 9.94924 7.77537 10.5995 7.77537C10.8099 7.77537 10.999 7.78599 11.169 7.79449C11.6684 7.81574 11.9191 7.84549 12.2485 8.63387C12.6586 9.62199 13.6574 12.0615 13.7764 12.3122C13.8975 12.563 14.0186 12.903 13.8486 13.2324C13.6892 13.5724 13.549 13.7232 13.2982 14.0122C13.0475 14.3012 12.8095 14.5222 12.5587 14.8325C12.3292 15.1024 12.07 15.3914 12.359 15.8907C12.648 16.3795 13.6467 18.0094 15.1172 19.3184C17.0149 21.0077 18.5534 21.5475 19.1037 21.777C19.5139 21.947 20.0026 21.9066 20.3022 21.5879C20.6826 21.1777 21.1522 20.4977 21.6304 19.8284C21.9704 19.3481 22.3996 19.2886 22.8501 19.4586C23.3091 19.618 25.738 20.8186 26.2374 21.0672C26.7367 21.318 27.0661 21.437 27.1872 21.6474C27.3062 21.8577 27.3062 22.8459 26.8961 24.0061Z" fill="white"/>
</g>
<defs>
<clipPath id="clip0_3403_1267">
<rect width="34" height="34" fill="white"/>
</clipPath>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

44
react-project/src/components/MainInstitucional/Contato.tsx
View File

@ -1,8 +1,8 @@
import { Formik, Form, Field, ErrorMessage } from "formik";
import FormSchema from "./assets/schemas/FormSchema";
import MaskedInput from "react-text-mask";
import FormSchema from "./assets/schemas/FormSchema";
import contato from "./assets/modules/Contato.module.scss";
interface IFormikValues {
@ -15,7 +15,6 @@ interface IFormikValues {
terms: boolean;
}
//setar valores iniciais
const initialValues = {
name: "",
email: "",
@ -28,7 +27,6 @@ const initialValues = {
};
const dateMask = [/\d/, /\d/, ".", /\d/, /\d/, ".", /\d/, /\d/, /\d/, /\d/];
const cpfMask = [
/\d/,
/\d/,
@ -45,7 +43,6 @@ const cpfMask = [
/\d/,
/\d/,
];
const phoneNumberMask = [
"(",
/\d/,
@ -71,26 +68,19 @@ const Contato = () => {
<Formik
onSubmit={(values: IFormikValues, actions) => {
/*values.sent = true;*/
console.log(values);
actions.resetForm();
/*alert("formulario enviado");*/
const sent = document.querySelector("#sent") as HTMLSpanElement;
sent.innerHTML = "*Formulário enviado com sucesso!";
}}
initialValues={initialValues}
validationSchema={FormSchema}
>
{({ errors, touched, handleBlur }) => (
{({ handleBlur }) => (
<Form>
<div className={contato["forms__form-col"]}>
<label htmlFor="name">Nome</label>
<Field
placeholder="Seu nome completo"
id="name"
name="name"
className={errors.name && touched.name && "invalid"}
/>
<Field placeholder="Seu nome completo" id="name" name="name" />
<ErrorMessage
component="span"
name="name"
@ -99,12 +89,7 @@ const Contato = () => {
</div>
<div className={contato["forms__form-col"]}>
<label htmlFor="email">E-mail</label>
<Field
placeholder="Seu e-mail"
id="email"
name="email"
className={errors.email && touched.email && "invalid"}
/>
<Field placeholder="Seu e-mail" id="email" name="email" />
<ErrorMessage
component="span"
name="email"
@ -123,7 +108,6 @@ const Contato = () => {
type="text"
placeholder="000.000.000-00"
onBlur={handleBlur}
className={errors.cpf && touched.cpf && "invalid"}
/>
)}
/>
@ -145,7 +129,6 @@ const Contato = () => {
type="text"
placeholder="00.00.0000"
onBlur={handleBlur}
className={errors.date && touched.date && "invalid"}
/>
)}
/>
@ -167,7 +150,6 @@ const Contato = () => {
type="text"
placeholder="(00) 00000-0000"
onBlur={handleBlur}
className={errors.telefone && touched.telefone && "invalid"}
/>
)}
/>
@ -184,22 +166,6 @@ const Contato = () => {
type="instagram"
id="instagram"
name="instagram"
className={errors.instagram && touched.instagram && "invalid"}
/*name="instagram"
render={({ field }: any) => (
<MaskedInput
{...field}
guide={false}
id="instagram"
mask={insta}
type="text"
placeholder="@seuuser"
onBlur={handleBlur}
className={
errors.instagram && touched.instagram && "invalid"
}
/>
)}*/
/>
<ErrorMessage
component="span"

12
react-project/src/components/MainInstitucional/assets/modules/Contato.module.scss
View File

@ -117,7 +117,7 @@
opacity: 0;
width: 14px;
height: 14px;
margin-left: 1px;
margin-left: 1.3px;
margin-top: 1.5px;
@media screen and (min-width: 2500px) {
@ -154,6 +154,7 @@
button {
width: 100%;
height: 52.44px;
border: none;
border-radius: 25px;
background-color: var(--black);
font-weight: 400;
@ -162,6 +163,15 @@
letter-spacing: 0.05em;
color: var(--white);
cursor: pointer;
transition: all 0.2s linear;
&:hover {
background-color: var(--black-100);
}
&:active {
background-color: var(--black);
}
@media screen and (min-width: 2500px) {
font-size: 32px;

1
react-project/src/components/MainInstitucional/assets/modules/Main.module.scss
View File

@ -1,5 +1,4 @@
.main {
border: 1px solid var(--gray-100);
margin-left: 100px;
margin-right: 100px;
margin-top: 29px;

5
react-project/src/components/MainInstitucional/assets/modules/Navigation.module.scss
View File

@ -29,6 +29,11 @@
font-weight: 400;
font-size: 16px;
line-height: 19px;
transition: all 0.2s linear;
&:hover {
color: var(--black);
}
@media screen and (min-width: 2500px) {
font-size: 32px;

6
react-project/src/pages/Institucional.tsx
View File

@ -3,18 +3,20 @@ import "../assets/styles/variables.scss";
import { Header } from "../components/Header/Header";
import { HeaderMobile } from "../components/Header/HeaderMobile";
import { Main } from "../components/MainInstitucional/Main";
import { FixedIcons } from "../components/FixedIcons/FixedIcons";
import { Footer } from "../components/Footer/Footer";
const Institucional = () => {
return (
<div>
<>
<header>
<Header />
<HeaderMobile />
</header>
<Main />
<FixedIcons />
<Footer />
</div>
</>
);
};