SavioCarvalhoMoraes/desafio-react-e-typescript-savio-carvalho-moraes
1
0
Fork 0
forked from M3-Academy/desafio-react-e-typescript
Code Issues Pull Requests Packages Projects Releases Wiki Activity

development #17

Merged
SavioCarvalhoMoraes merged 22 commits from development into feature/body 2023-01-19 15:03:10 +00:00
Conversation 0 Commits 22 Files Changed 47 +7480 -7546
12 changed files with 7480 additions and 7546 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c37af94e12 - Show all commits

61
package-lock.json generated
View File

@ -22,6 +22,7 @@
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",
"typescript": "^4.9.4",
@ -3140,6 +3141,14 @@
"react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
}
},
"node_modules/@remix-run/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ==",
"engines": {
"node": ">=14"
}
},
"node_modules/@restart/hooks": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
@ -15327,6 +15336,36 @@
"node": ">=0.10.0"
}
},
"node_modules/react-router": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
"dependencies": {
"@remix-run/router": "1.2.1"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8"
}
},
"node_modules/react-router-dom": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
"dependencies": {
"@remix-run/router": "1.2.1",
"react-router": "6.6.2"
},
"engines": {
"node": ">=14"
},
"peerDependencies": {
"react": ">=16.8",
"react-dom": ">=16.8"
}
},
"node_modules/react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@ -20870,6 +20909,11 @@
"@swc/helpers": "^0.4.14"
}
},
"@remix-run/router": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.2.1.tgz",
"integrity": "sha512-XiY0IsyHR+DXYS5vBxpoBe/8veTeoRpMHP+vDosLZxL5bnpetzI0igkxkLZS235ldLzyfkxF+2divEwWHP3vMQ=="
},
"@restart/hooks": {
"version": "0.4.7",
"resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.7.tgz",
@ -29643,6 +29687,23 @@
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
"integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
},
"react-router": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-6.6.2.tgz",
"integrity": "sha512-uJPG55Pek3orClbURDvfljhqFvMgJRo59Pktywkk8hUUkTY2aRfza8Yhl/vZQXs+TNQyr6tu+uqz/fLxPICOGQ==",
"requires": {
"@remix-run/router": "1.2.1"
}
},
"react-router-dom": {
"version": "6.6.2",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.6.2.tgz",
"integrity": "sha512-6SCDXxRQqW5af8ImOqKza7icmQ47/EMbz572uFjzvcArg3lZ+04PxSPp8qGs+p2Y+q+b+S/AjXv8m8dyLndIIA==",
"requires": {
"@remix-run/router": "1.2.1",
"react-router": "6.6.2"
}
},
"react-scripts": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

1
package.json
View File

@ -16,6 +16,7 @@
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.6.2",
"react-scripts": "5.0.1",
"react-text-mask": "^5.5.0",
"typescript": "^4.9.4",

47
public/index.html
View File

@ -1,21 +1,22 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<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="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<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="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
@ -24,12 +25,13 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
<title>React App</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.
@ -38,6 +40,9 @@
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
</body>
</html>

91
src/components/NavigationBar/NavigationBar.tsx
View File

@ -1,32 +1,77 @@
import Container from "react-bootstrap/Container";
/*import Container from "react-bootstrap/Container";
import Nav from "react-bootstrap/Nav";
import Navbar from "react-bootstrap/Navbar";
import NavDropdown from "react-bootstrap/NavDropdown";
import styles from "./navigationBar.module.scss";
*/
import styles from "./navigationBar.module.scss";
const NavigationBar = () => {
return (
<Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
<Container>
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="me-auto">
<Nav.Link className={styles["cursosNav"]} href="#cursos">
CURSOS
</Nav.Link>
<Nav.Link className={styles["saibaNav"]} href="#saibamais">
SAIBA MAIS
</Nav.Link>
<Nav.Link
className={styles["instituicionaisNav"]}
href="#institucionais"
>
INSTITUCIONAIS
</Nav.Link>
</Nav>
</Navbar.Collapse>
</Container>
</Navbar>
<nav className="navbar navbar-expand-lg bg-body-tertiary" id="navegador">
<div className="container-fluid">
<a className="navbar-brand" href="#">
Navbar
</a>
<button
className="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarNavDropdown"
aria-controls="navbarNavDropdown"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNavDropdown">
<ul className="navbar-nav">
<li className="nav-item">
<a className="nav-link active" aria-current="page" href="#">
Home
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Features
</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">
Pricing
</a>
</li>
<li className="nav-item dropdown">
<a
className="nav-link dropdown-toggle"
href="#"
role="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
</a>
<ul className="dropdown-menu">
<li>
<a className="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a className="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
);
};

37
src/components/NavigationBar/navigationBar.module.scss
View File

@ -1,28 +1,13 @@
.cursosNav {
color: #ffffff;
font-family: "Roboto";
font-weight: 500;
font-size: 14px;
@media screen and (min-width: 2500px) {
font-size: 28px;
}
}
.saibaNav {
color: #ffffff;
font-family: "Roboto";
font-weight: 500;
font-size: 14px;
@media screen and (min-width: 2500px) {
font-size: 28px;
}
}
.instituicionaisNav {
color: #ffffff;
font-family: "Roboto";
font-weight: 500;
font-size: 14px;
@media screen and (min-width: 2500px) {
font-size: 28px;
/*#navegador {
xs: 0;
sm: 375px;
md: 768px;
lg: 1025px;
xl: 1280px;
xxl: 2500px;
}*/
@media (min-width: 768px) and (max-width: 1024px) {
.collapse {
display: none !important;
}
}

10
src/components/Router/Router.tsx Normal file
View File

@ -0,0 +1,10 @@
import { BrowserRouter as Router, Route } from "react-router-dom";
import React from "react";
const Home = () => {
//const style = { background: "black" };
return <div /*style={style}*/></div>;
};
export { Home };

1
src/index.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import ReactDOM from "react-dom/client";
import "./styles/main.scss";
import { Home } from "./pages/Home";
const root = ReactDOM.createRoot(

4
src/pages/Home.tsx
View File

@ -1,11 +1,11 @@
import React from "react";
import { AccordionBody } from "../components/AccordionBody/AccordionBody";
import { NavigationBar } from "../components/NavigationBar/NavigationBar";
const Home = () => {
//const style = { background: "black" };
return (
<div /*style={style}*/>
<AccordionBody />
<NavigationBar></NavigationBar>
</div>
);
};

9
src/styles/common/global.scss
View File

@ -18,12 +18,3 @@ button {
li {
list-style-type: none;
}
/*
$grid-breakpoints: (
xs: 0,
sm: 375px,
md: 768px,
lg: 1025px,
xl: 1280px,
xxl: 2500px,
);*/

3
src/styles/main.scss
View File

@ -3,4 +3,5 @@
@import "common/reset.scss";
@import "partials/header.scss";
@import "partials/container.scss";
@import "~bootstrap/scss/bootstrap";
@import "utils/bootcustom.scss";
@import "/node_modules/bootstrap/scss/bootstrap";

13
src/styles/utils/bootcustom.scss Normal file
View File

@ -0,0 +1,13 @@
@import "/node_modules/bootstrap/scss/functions";
$grid-breakpoints: (
xs: 0,
xsm: 362px,
sm: 576px,
md: 768px,
lg: 950px,
xl: 1200px,
xxl: 1400px,
);
@import "/node_modules/bootstrap/scss/variables";
@import "/node_modules/bootstrap/scss/mixins";
@import "/node_modules/bootstrap/scss/bootstrap";

14749
yarn.lock
View File

File diff suppressed because it is too large Load Diff