forked from M3-Academy/desafio-react-e-typescript
feat: criacao do html e estilizacao header desktop
This commit is contained in:
parent
0c351a3524
commit
175c60b233
23
.gitignore
vendored
Normal file
23
.gitignore
vendored
Normal file
@ -0,0 +1,23 @@
|
||||
# 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*
|
||||
28710
package-lock.json
generated
Normal file
28710
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
43
package.json
Normal file
43
package.json
Normal file
@ -0,0 +1,43 @@
|
||||
{
|
||||
"name": "desafio-react-typescript",
|
||||
"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",
|
||||
"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"
|
||||
]
|
||||
}
|
||||
}
|
||||
24
public/index.html
Normal file
24
public/index.html
Normal file
@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
|
||||
<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 href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
|
||||
|
||||
<title>Institucional</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<div id="root"></div>
|
||||
</body>
|
||||
</html>
|
||||
13
src/App.tsx
Normal file
13
src/App.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import { Footer } from "./components/Footer";
|
||||
import { Header } from "./components/Header";
|
||||
import { Main } from "./components/Main";
|
||||
|
||||
export function App() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Main />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
src/assets/Logo-M3Academy 1 (1).svg
Normal file
9
src/assets/Logo-M3Academy 1 (1).svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
10
src/assets/arrow-point-to-right (3).svg
Normal file
10
src/assets/arrow-point-to-right (3).svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3751_560)">
|
||||
<path d="M11.9417 7.03685L5.22531 0.320703C4.79807 -0.106746 4.10537 -0.106746 3.67833 0.320703C3.25126 0.747771 3.25126 1.44043 3.67833 1.86747L9.62128 7.81023L3.67851 13.7528C3.25144 14.18 3.25144 14.8726 3.67851 15.2997C4.10558 15.7269 4.79824 15.7269 5.22548 15.2997L11.9418 8.58344C12.1554 8.3698 12.262 8.0901 12.262 7.81026C12.262 7.53029 12.1552 7.25038 11.9417 7.03685Z" fill="#C4C4C4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3751_560">
|
||||
<rect width="15.62" height="15.62" fill="white" transform="matrix(1 0 0 -1 0 15.6201)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 689 B |
12
src/assets/cart 1.svg
Normal file
12
src/assets/cart 1.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<svg width="55" height="55" viewBox="0 0 55 55" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3751_539)">
|
||||
<path d="M54.3344 7.95273C54.0351 7.57862 53.5819 7.36086 53.1027 7.36086H11.1231L9.9492 2.27412C9.78398 1.55848 9.14672 1.05151 8.41228 1.05151H1.57728C0.706248 1.05151 0 1.75776 0 2.6289C0 3.50004 0.706248 4.20619 1.57728 4.20619H7.15753L15.1259 38.7358C15.291 39.4515 15.9283 39.9585 16.6628 39.9585H48.2656C49.1367 39.9585 49.8428 39.2522 49.8428 38.3812C49.8428 37.51 49.1366 36.8039 48.2656 36.8039H17.9176L16.7044 31.5462H48.3709C49.1086 31.5462 49.7478 31.0348 49.9097 30.3151L54.6416 9.28438C54.7467 8.81682 54.6338 8.32694 54.3344 7.95273Z" fill="white"/>
|
||||
<path d="M23.1338 42.0615C19.9449 42.0615 17.3503 44.6559 17.3503 47.845C17.3503 51.0341 19.9448 53.6285 23.1338 53.6285C26.3228 53.6285 28.9173 51.0341 28.9173 47.845C28.9173 44.6559 26.3229 42.0615 23.1338 42.0615Z" fill="white"/>
|
||||
<path d="M42.0614 42.0615C38.8725 42.0615 36.278 44.6559 36.278 47.845C36.278 51.0341 38.8724 53.6285 42.0614 53.6285C45.2504 53.6285 47.8449 51.0341 47.8449 47.845C47.8449 44.6559 45.2505 42.0615 42.0614 42.0615Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3751_539">
|
||||
<rect width="54.68" height="54.68" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
10
src/assets/home 1.svg
Normal file
10
src/assets/home 1.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3851_47)">
|
||||
<path d="M30.9231 14.8352L28.692 12.6041L16.4148 0.326808C15.9789 -0.108936 15.2724 -0.108936 14.8366 0.326808L2.55921 12.6041L0.326997 14.8364C-0.101226 15.2798 -0.088997 15.9863 0.354399 16.4146C0.786939 16.8323 1.47263 16.8323 1.90517 16.4146L2.23105 16.0864V30.1339C2.23105 30.7503 2.73075 31.25 3.34719 31.25H27.9018C28.5183 31.25 29.018 30.7503 29.018 30.1339V16.0864L29.345 16.4134C29.7884 16.8417 30.4949 16.8294 30.9231 16.386C31.3409 15.9535 31.3409 15.2677 30.9231 14.8352ZM18.9729 29.0178H12.2762V20.0888H18.9729V29.0178ZM26.7857 29.0178H21.2051V18.9727C21.2051 18.3563 20.7054 17.8566 20.089 17.8566H11.1601C10.5436 17.8566 10.0439 18.3563 10.0439 18.9727V29.0178H4.46333V13.8542L15.6245 2.69296L26.7857 13.8542V29.0178Z" fill="#C4C4C4"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3851_47">
|
||||
<rect width="31.25" height="31.25" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1003 B |
10
src/assets/search 2.svg
Normal file
10
src/assets/search 2.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_3751_533)">
|
||||
<path d="M25.7949 22.6886C27.5246 20.3265 28.5592 17.4252 28.5592 14.2799C28.5592 6.40637 22.1531 0.000244141 14.2796 0.000244141C6.40606 0.000244141 0 6.40637 0 14.2799C0 22.1534 6.40613 28.5596 14.2797 28.5596C17.4249 28.5596 20.3266 27.5248 22.6886 25.7951L32.0435 35.15L35.15 32.0436C35.15 32.0435 25.7949 22.6886 25.7949 22.6886ZM14.2797 24.1658C8.82824 24.1658 4.39377 19.7313 4.39377 14.2799C4.39377 8.82848 8.82824 4.39401 14.2797 4.39401C19.7311 4.39401 24.1655 8.82848 24.1655 14.2799C24.1655 19.7313 19.731 24.1658 14.2797 24.1658Z" fill="#292929"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_3751_533">
|
||||
<rect width="35.15" height="35.15" rx="5" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 821 B |
5
src/components/Footer/index.tsx
Normal file
5
src/components/Footer/index.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
export function Footer() {
|
||||
return (
|
||||
<h1>Footer</h1>
|
||||
)
|
||||
}
|
||||
163
src/components/Header/index.module.css
Normal file
163
src/components/Header/index.module.css
Normal file
@ -0,0 +1,163 @@
|
||||
.containerHeader {
|
||||
background-color: var(--black);
|
||||
width: 100%;
|
||||
max-height: 118px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
border-bottom: 1px solid var(--white);
|
||||
}
|
||||
|
||||
.contentWrapper {
|
||||
width: 90%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 1.375rem 0;
|
||||
}
|
||||
|
||||
.contentHeader {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contentLogo {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contentLogo figure {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
max-width: 265.62px;
|
||||
}
|
||||
|
||||
.contentLogo figure img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentSearch {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contentSearch span {
|
||||
width: 67%;
|
||||
height: 57px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contentSearch span input {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 0.313rem;
|
||||
outline: none;
|
||||
font-size: 28px;
|
||||
color: var(--gray-300);
|
||||
padding: 0.75rem 1rem;
|
||||
border: 1px solid var(--gray-50);
|
||||
}
|
||||
|
||||
.contentSearch span img {
|
||||
width: 35.15px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.contentInfoHeader {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contentLogin {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-right: 3.438rem;
|
||||
}
|
||||
|
||||
.contentLogin a {
|
||||
font-size: 28px;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
.miniCart {
|
||||
max-width: 54.68px;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.miniCart img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.containerList {
|
||||
background-color: var(--black);
|
||||
width: 100%;
|
||||
max-height: 118px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contentListButtons {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentListButtons ul {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.contentListButtons ul li {
|
||||
margin-right: 3.482rem;
|
||||
}
|
||||
|
||||
.contentListButtons ul li a {
|
||||
text-decoration: none;
|
||||
color: var(--white);
|
||||
text-transform: uppercase;
|
||||
font-size: 28px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.containerBreadCrumb {
|
||||
width: 100%;
|
||||
max-height: 118px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.contentBreadCrumb {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.contentBreadCrumb span {
|
||||
font-size: 24px;
|
||||
font-weight: 400;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-300);
|
||||
}
|
||||
|
||||
.contentBreadCrumb img, .contentBreadCrumb span {
|
||||
margin-right: 0.547rem;
|
||||
}
|
||||
64
src/components/Header/index.tsx
Normal file
64
src/components/Header/index.tsx
Normal file
@ -0,0 +1,64 @@
|
||||
import style from "./index.module.css";
|
||||
import logo from "../../assets/Logo-M3Academy 1 (1).svg";
|
||||
import imgSearch from "../../assets/search 2.svg";
|
||||
import imgMiniCart from "../../assets/cart 1.svg";
|
||||
import imgHome from "../../assets/home 1.svg";
|
||||
import imgArrowRight from "../../assets/arrow-point-to-right (3).svg";
|
||||
|
||||
export function Header() {
|
||||
return (
|
||||
<>
|
||||
<div className={style.containerHeader}>
|
||||
<div className={style.contentWrapper}>
|
||||
<div className={style.contentHeader}>
|
||||
<div className={style.contentLogo}>
|
||||
<figure>
|
||||
<img src={logo} alt="Logo da M3 academy" />
|
||||
</figure>
|
||||
</div>
|
||||
<div className={style.contentSearch}>
|
||||
<span>
|
||||
<input type="text" />
|
||||
<img src={imgSearch} alt="Logo de pesquisa" />
|
||||
</span>
|
||||
</div>
|
||||
<div className={style.contentInfoHeader}>
|
||||
<div className={style.contentLogin}>
|
||||
<a href="/">Entrar</a>
|
||||
</div>
|
||||
<button className={style.miniCart}>
|
||||
<img src={imgMiniCart} alt="Logo carrinho" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.containerList}>
|
||||
<div className={style.contentWrapper}>
|
||||
<div className={style.contentListButtons}>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/">cursos</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">Saiba mais</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/">INSTITUCIONAIS</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className={style.containerBreadCrumb}>
|
||||
<div className={style.contentWrapper}>
|
||||
<div className={style.contentBreadCrumb}>
|
||||
<img src={imgHome} alt="Casinha" />
|
||||
<img src={imgArrowRight} alt="seta para a direita" />
|
||||
<span>institucional</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
5
src/components/Main/index.tsx
Normal file
5
src/components/Main/index.tsx
Normal file
@ -0,0 +1,5 @@
|
||||
export function Main() {
|
||||
return (
|
||||
<h1>Main</h1>
|
||||
)
|
||||
}
|
||||
34
src/global.css
Normal file
34
src/global.css
Normal file
@ -0,0 +1,34 @@
|
||||
:root {
|
||||
--black2: #100D0E;
|
||||
--black: #000000;
|
||||
|
||||
--white: #FFFFFF;
|
||||
|
||||
--red: #FF0000;
|
||||
|
||||
--blue: #5200FF;
|
||||
|
||||
--green: #008000;
|
||||
|
||||
--gray-50: #F0F0F0;
|
||||
--gray-100: #E5E5E5;
|
||||
--gray-300: #C4C4C4;
|
||||
--gray-500: #C6C6C6;
|
||||
--gray-700: #B9B7B7;
|
||||
--gray-900: #7D7D7D;
|
||||
--gray-1100: #303030;
|
||||
--gray-1300: #292929;
|
||||
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: "Roboto", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
13
src/index.tsx
Normal file
13
src/index.tsx
Normal file
@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom/client';
|
||||
import './global.css';
|
||||
import { App } from './App';
|
||||
|
||||
const root = ReactDOM.createRoot(
|
||||
document.getElementById('root') as HTMLElement
|
||||
);
|
||||
root.render(
|
||||
<React.StrictMode>
|
||||
<App />
|
||||
</React.StrictMode>
|
||||
);
|
||||
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" />
|
||||
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