forked from M3-Academy/desafio-react-e-typescript
feat: adicionando header
This commit is contained in:
parent
0c351a3524
commit
82ee3e8395
70
.gitignore
vendored
Normal file
70
.gitignore
vendored
Normal file
@ -0,0 +1,70 @@
|
||||
node_modules
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.js
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
32259
package-lock.json
generated
Normal file
32259
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
44
package.json
Normal file
44
package.json
Normal file
@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "desafio-react-e-typescript-ana-carolina-duarte-cavalcante",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
"@testing-library/user-event": "^13.5.0",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@types/node": "^16.18.11",
|
||||
"@types/react": "^18.0.26",
|
||||
"@types/react-dom": "^18.0.10",
|
||||
"node-sass": "^8.0.0",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-scripts": "5.0.1",
|
||||
"typescript": "^4.9.4",
|
||||
"web-vitals": "^2.1.4"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start",
|
||||
"build": "react-scripts build",
|
||||
"test": "react-scripts test",
|
||||
"eject": "react-scripts eject"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": [
|
||||
"react-app",
|
||||
"react-app/jest"
|
||||
]
|
||||
},
|
||||
"browserslist": {
|
||||
"production": [
|
||||
">0.2%",
|
||||
"not dead",
|
||||
"not op_mini all"
|
||||
],
|
||||
"development": [
|
||||
"last 1 chrome version",
|
||||
"last 1 firefox version",
|
||||
"last 1 safari version"
|
||||
]
|
||||
}
|
||||
}
|
||||
30
public/index.html
Normal file
30
public/index.html
Normal file
@ -0,0 +1,30 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
name="description"
|
||||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
|
||||
<title>Desafio React e Typescript</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start` or `yarn start`.
|
||||
To create a production bundle, use `npm run build` or `yarn build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
12
src/assets/imgs/cart.svg
Normal file
12
src/assets/imgs/cart.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3715_4730)">
|
||||
<path d="M27.823 4.07236C27.6697 3.88079 27.4377 3.76928 27.1923 3.76928H5.69581L5.09469 1.16451C5.01009 0.798054 4.68377 0.538452 4.30768 0.538452H0.80768C0.361648 0.538452 0 0.9001 0 1.34619C0 1.79227 0.361648 2.15387 0.80768 2.15387H3.66516L7.7455 19.8355C7.83005 20.2019 8.15642 20.4615 8.53251 20.4615H24.7154C25.1614 20.4615 25.523 20.0999 25.523 19.6539C25.523 19.2078 25.1614 18.8462 24.7154 18.8462H9.17509L8.55384 16.1539H24.7693C25.1471 16.1539 25.4744 15.892 25.5573 15.5235L27.9803 4.75426C28.0342 4.51483 27.9763 4.26398 27.823 4.07236Z" fill="white"/>
|
||||
<path d="M11.8461 21.5385C10.2132 21.5385 8.88458 22.867 8.88458 24.5C8.88458 26.133 10.2131 27.4615 11.8461 27.4615C13.4791 27.4615 14.8077 26.133 14.8077 24.5C14.8077 22.867 13.4792 21.5385 11.8461 21.5385Z" fill="white"/>
|
||||
<path d="M21.5385 21.5385C19.9055 21.5385 18.5769 22.867 18.5769 24.5C18.5769 26.133 19.9054 27.4615 21.5385 27.4615C23.1714 27.4615 24.5 26.133 24.5 24.5C24.5 22.867 23.1715 21.5385 21.5385 21.5385Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3715_4730">
|
||||
<rect width="28" height="28" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
9
src/assets/imgs/logom3.svg
Normal file
9
src/assets/imgs/logom3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
10
src/assets/imgs/magnifying-glass.svg
Normal file
10
src/assets/imgs/magnifying-glass.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_4057_99)">
|
||||
<path d="M13.2094 11.6187C14.0951 10.4091 14.6249 8.92334 14.6249 7.31267C14.6249 3.2807 11.3444 0.000183105 7.31245 0.000183105C3.28048 0.000183105 0 3.2807 0 7.31267C0 11.3446 3.28052 14.6252 7.31248 14.6252C8.92315 14.6252 10.409 14.0953 11.6186 13.2095L16.4092 18.0001L18 16.4093C18 16.4092 13.2094 11.6187 13.2094 11.6187ZM7.31248 12.3751C4.52086 12.3751 2.25001 10.1043 2.25001 7.31267C2.25001 4.52104 4.52086 2.25019 7.31248 2.25019C10.1041 2.25019 12.375 4.52104 12.375 7.31267C12.375 10.1043 10.1041 12.3751 7.31248 12.3751Z" fill="#303030"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_4057_99">
|
||||
<rect width="18" height="18" rx="5" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 804 B |
164
src/components/Header.module.scss
Normal file
164
src/components/Header.module.scss
Normal file
@ -0,0 +1,164 @@
|
||||
@import "../variaveis.scss";
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
background: $black;
|
||||
}
|
||||
|
||||
//Header Content Top
|
||||
.header__content--top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
width: 84.378%;
|
||||
height: 76px;
|
||||
margin: 0 auto;
|
||||
padding-left: 0px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 92.002%;
|
||||
height: 101px;
|
||||
}
|
||||
.list {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
width: 12.589%;
|
||||
padding: 0;
|
||||
@media (min-width: 2500px) {
|
||||
width: 9.331%;
|
||||
}
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
height: auto;
|
||||
width: auto;
|
||||
& a {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
& .cart__content--link {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 54.68px;
|
||||
height: 54.68px;
|
||||
}
|
||||
& img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&__item--logo {
|
||||
width: 12.589%;
|
||||
height: 25.86px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
@media (min-width: 2500px) {
|
||||
width: 11.545%;
|
||||
height: 50.5px;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
& img {
|
||||
width: 100%;
|
||||
height: 25.86px;
|
||||
@media (min-width: 2500px) {
|
||||
height: 50.5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input__header {
|
||||
width: 200.04px;
|
||||
height: 12.04px;
|
||||
background: $white;
|
||||
border: 2px solid $primary-700;
|
||||
border-radius: 5px;
|
||||
padding: 8px 44px 8px 16px;
|
||||
background-image: url("../assets/imgs/magnifying-glass.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: bottom 50% right 16px;
|
||||
background-size: 18px;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
@media (min-width: 2500px) {
|
||||
width: 435.19px;
|
||||
height: 31.18px;
|
||||
padding: 11px 60px 10.85px 16.47px;
|
||||
background-position: bottom 50% right 10.85px;
|
||||
background-size: 35.15px;
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
&::placeholder {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
color: $primary-500;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Header Content Bottom
|
||||
.nav__content {
|
||||
border-top: 1px solid $primary-600;
|
||||
width: auto;
|
||||
height: 43.01px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@media (min-width: 2500px) {
|
||||
height: 60.01px;
|
||||
}
|
||||
.header__content--bottom {
|
||||
padding-left: 0;
|
||||
width: 84.378%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@media (min-width: 2500px) {
|
||||
width: 92.002%;
|
||||
}
|
||||
& li {
|
||||
margin-right: 55px;
|
||||
@media (min-width: 2500px) {
|
||||
margin-right: 55.71px;
|
||||
}
|
||||
& a {
|
||||
font-family: "Roboto";
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 16px;
|
||||
text-transform: uppercase;
|
||||
color: $white;
|
||||
text-decoration: none;
|
||||
@media (min-width: 2500px) {
|
||||
font-size: 28px;
|
||||
line-height: 33px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/components/Header.tsx
Normal file
18
src/components/Header.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { HeaderContentTop } from "./HeaderContentTop";
|
||||
import styles from "./Header.module.scss";
|
||||
import { HeaderContentBottom } from "./HeaderContentBottom";
|
||||
|
||||
const Header = () => {
|
||||
return (
|
||||
<header>
|
||||
<ul className={styles["header__content--top"]}>
|
||||
<HeaderContentTop/>
|
||||
</ul>
|
||||
<nav className={styles["nav__content"]}>
|
||||
<HeaderContentBottom/>
|
||||
</nav>
|
||||
</header>
|
||||
);
|
||||
};
|
||||
|
||||
export { Header };
|
||||
21
src/components/HeaderContentBottom.tsx
Normal file
21
src/components/HeaderContentBottom.tsx
Normal file
@ -0,0 +1,21 @@
|
||||
import styles from "./Header.module.scss";
|
||||
|
||||
const HeaderContentBottom = () => {
|
||||
return (
|
||||
<>
|
||||
<ul className={styles["header__content--bottom"]}>
|
||||
<li>
|
||||
<a href="/">Cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Saiba Mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Institucionais</a>
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { HeaderContentBottom };
|
||||
32
src/components/HeaderContentTop.tsx
Normal file
32
src/components/HeaderContentTop.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import React from 'react';
|
||||
import styles from "./Header.module.scss";
|
||||
import Logo from "../assets/imgs/logom3.svg";
|
||||
import Cart from "../assets/imgs/cart.svg";
|
||||
|
||||
const HeaderContentTop = () => {
|
||||
const [search, setSearch]: [string, (search: string) => void] = React.useState("");
|
||||
return (
|
||||
<>
|
||||
<li className={styles["list__item--logo"]}>
|
||||
<a href="/">
|
||||
<img src={Logo} alt="logo M3"/>
|
||||
</a>
|
||||
</li>
|
||||
<li className={styles["list__item"]}>
|
||||
<input className={styles["input__header"]} type="text" placeholder="Buscar..." value={search} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearch(e.target.value)}></input>
|
||||
</li>
|
||||
<ul className={styles["list"]}>
|
||||
<li className={styles["list__item"]}>
|
||||
<a href="/">Entrar</a>
|
||||
</li>
|
||||
<li className={styles["list__item"]}>
|
||||
<a href="/" className={styles["cart__content--link"]}>
|
||||
<img src={Cart} alt="ícone de carrinho"/>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { HeaderContentTop };
|
||||
5
src/global.scss
Normal file
5
src/global.scss
Normal file
@ -0,0 +1,5 @@
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
11
src/index.tsx
Normal file
11
src/index.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import "./global.scss";
|
||||
import { Home } from "./pages/Home";
|
||||
|
||||
ReactDOM.render(
|
||||
<React.StrictMode>
|
||||
<Home />
|
||||
</React.StrictMode>,
|
||||
document.getElementById("root")
|
||||
);
|
||||
11
src/pages/Home.tsx
Normal file
11
src/pages/Home.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import { Header } from "../components/Header";
|
||||
|
||||
const Home = () => {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export { Home };
|
||||
1
src/react-app-env.d.ts
vendored
Normal file
1
src/react-app-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="react-scripts" />
|
||||
7
src/variaveis.scss
Normal file
7
src/variaveis.scss
Normal file
@ -0,0 +1,7 @@
|
||||
//Colors
|
||||
$black: #000000;
|
||||
$white: #FFFFFF;
|
||||
|
||||
$primary-700: #f2f2f2;
|
||||
$primary-600: #C4C4C4;
|
||||
$primary-500: #C6C6C6;
|
||||
26
tsconfig.json
Normal file
26
tsconfig.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": [
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"esnext"
|
||||
],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": [
|
||||
"src"
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user