diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..fef8453 Binary files /dev/null and b/.DS_Store differ diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e727e3d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,13 @@ +{ + "name": "componentes-template", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "componentes-template", + "version": "1.0.0", + "license": "ISC" + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..8c939b6 --- /dev/null +++ b/package.json @@ -0,0 +1,12 @@ +{ + "name": "componentes-template", + "version": "1.0.0", + "description": "Utilize o conteúdo da pasta `template` para executar o exercício de fixação. Rode `npm install` para executar a instalação do React antes de tentar rodar o projeto com `npm run start`.", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC" +} diff --git a/template/.DS_Store b/template/.DS_Store new file mode 100644 index 0000000..df4e218 Binary files /dev/null and b/template/.DS_Store differ diff --git a/template/package.json b/template/package.json index b5619dd..0012c90 100644 --- a/template/package.json +++ b/template/package.json @@ -9,7 +9,8 @@ "@testing-library/user-event": "^13.5.0", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-scripts": "5.0.1", + "react-scripts": "^5.0.1", + "styled-components": "^6.1.0", "web-vitals": "^2.1.4" }, "scripts": { diff --git a/template/src/.DS_Store b/template/src/.DS_Store new file mode 100644 index 0000000..182e07d Binary files /dev/null and b/template/src/.DS_Store differ diff --git a/template/src/App.js b/template/src/App.js index 594a34f..4716687 100644 --- a/template/src/App.js +++ b/template/src/App.js @@ -1,13 +1,94 @@ import React from "react"; -import "./App.css"; +//import Header from "./components/Header"; +import Garagem from "./Garagem/Garagem"; +//import Footer from "./components/Footer"; +//import "./styles.css"; +import { GlobalStyle } from "./components/GlobalStyle"; +import { Estacionamento } from "./Garagem/style"; +import FuscaImage from "./img/fusca.jpg"; +import KombiImage from "./img/kombi.jpg"; +import OpalaImage from "./img/Opala.jpg"; +import CorselImage from "./img/Corsel.jpg"; +import BrasiliaImage from "./img/brasilia.jpg"; + + export default function App() { - + const nome = "Raissa"; + const nome2 = "Lili"; + + function apresentaGaragem(nome) { + alert(`Boas vindas a garagem de ${nome}`); + } + + + + const carro = { + modelo: "Fusca", + cor: "azul", + ano: 1974, + flex: "não", + imagem: FuscaImage + }; + + const carro2 = { + modelo: "Kombi", + cor: "verde", + ano: 1994, + flex: "não", + imagem: KombiImage + }; + + const carro3 = { + modelo: "Opala", + cor: "amarelo", + ano: 1972, + flex: "não", + imagem: OpalaImage + }; + + const carro4 = { + modelo: "Corsel", + cor: "cinza", + ano: 1964, + flex: "sim", + imagem: CorselImage + }; + + const carro5 = { + modelo: "Brasilia", + cor: "azul", + ano: 2000, + flex: "sim", + imagem: BrasiliaImage + }; return ( +
- -

Aula - Componentes React

+ + + + + + +
+ ); } diff --git a/template/src/Garagem/Garagem.js b/template/src/Garagem/Garagem.js new file mode 100644 index 0000000..9fd428b --- /dev/null +++ b/template/src/Garagem/Garagem.js @@ -0,0 +1,34 @@ +import React from "react"; +import Carro from "../components/Carro/Carro"; +import { Botao } from "./style"; +import { GaragemContainer } from "./style"; +import { ImgCarro } from "../components/Carro/styled"; +import FuscaImage from "../img/fusca.jpg"; +import KombiImage from "../img/kombi.jpg"; + + +export default function Garagem(props) { + return ( + <> + +

Garagem de {props.nomeGaragem}

+ + props.apresentaGaragem(props.nomeGaragem)}>Apresentar Garagem + + {props.carro1.modelo} + + + {props.carro1.modelo} + + + {props.carro1.modelo} + + + {props.carro1.modelo} + + + + + + ); +} \ No newline at end of file diff --git a/template/src/Garagem/style.js b/template/src/Garagem/style.js new file mode 100644 index 0000000..0e4ac41 --- /dev/null +++ b/template/src/Garagem/style.js @@ -0,0 +1,24 @@ +import styled from "styled-components"; + + +export const Botao = styled.button` + background-color: orange; + padding: 8px 16px; +` + +export const GaragemContainer = styled.main` + display: flex; + flex-direction: column; + gap: 16px; + align-items: center; + border: 1px solid black; +` + +export const Estacionamento = styled.section` + display: grid; + grid-template-columns: 1fr 1fr; + gap: 16px 32px; + border: 1px solid black; + +` + diff --git a/template/src/components/Carro/Carro.js b/template/src/components/Carro/Carro.js new file mode 100644 index 0000000..79e9d1c --- /dev/null +++ b/template/src/components/Carro/Carro.js @@ -0,0 +1,16 @@ +import React from "react"; + +export default function Carro ( {carro}){ + return( + <> +

{carro.modelo}

+ + + ) +} \ No newline at end of file diff --git a/template/src/components/Carro/styled.js b/template/src/components/Carro/styled.js new file mode 100644 index 0000000..2e6d55c --- /dev/null +++ b/template/src/components/Carro/styled.js @@ -0,0 +1,6 @@ +import styled from "styled-components"; + +export const ImgCarro = styled.img` + width: 30vw; + +` \ No newline at end of file diff --git a/template/src/components/GlobalStyle.js b/template/src/components/GlobalStyle.js new file mode 100644 index 0000000..614decf --- /dev/null +++ b/template/src/components/GlobalStyle.js @@ -0,0 +1,12 @@ +import { createGlobalStyle } from "styled-components" + +export const GlobalStyle = createGlobalStyle` + *{ + margin: 5px; + padding: 0; + box-sizing: border-box; + font-family: sans-serif; + text-align: center; + } + +` \ No newline at end of file diff --git a/template/src/components/Tudo/Copywrite.js b/template/src/components/Tudo/Copywrite.js new file mode 100644 index 0000000..bfb1460 --- /dev/null +++ b/template/src/components/Tudo/Copywrite.js @@ -0,0 +1,9 @@ +import React from "react"; + +export default function Copywrite(){ + return( + <> +

Copywrite © Raissa Gomes

+ + ) +} \ No newline at end of file diff --git a/template/src/components/Tudo/Footer.js b/template/src/components/Tudo/Footer.js new file mode 100644 index 0000000..a97a03e --- /dev/null +++ b/template/src/components/Tudo/Footer.js @@ -0,0 +1,13 @@ +import React from "react"; +import RedesSociais from "./Redes-Sociais"; +import Copywrite from "./Copywrite"; + +export default function Footer() { + return( + <> + + + + + ) +} \ No newline at end of file diff --git a/template/src/components/Tudo/Header.js b/template/src/components/Tudo/Header.js new file mode 100644 index 0000000..bd2d5bc --- /dev/null +++ b/template/src/components/Tudo/Header.js @@ -0,0 +1,11 @@ +import React from "react"; +import image from "../img/logo.png"; + +export default function Header(){ + return( + <> +

Aula - Componentes React

+ logo + + ); +} \ No newline at end of file diff --git a/template/src/components/Tudo/Redes-Sociais.js b/template/src/components/Tudo/Redes-Sociais.js new file mode 100644 index 0000000..128b157 --- /dev/null +++ b/template/src/components/Tudo/Redes-Sociais.js @@ -0,0 +1,9 @@ +import React from "react"; + +export default function RedesSociais() { + return( + <> + Instagram + + ) +} \ No newline at end of file diff --git a/template/src/img/Corsel.jpg b/template/src/img/Corsel.jpg new file mode 100644 index 0000000..694db26 Binary files /dev/null and b/template/src/img/Corsel.jpg differ diff --git a/template/src/img/Opala.jpg b/template/src/img/Opala.jpg new file mode 100644 index 0000000..e61ba17 Binary files /dev/null and b/template/src/img/Opala.jpg differ diff --git a/template/src/img/brasilia.jpg b/template/src/img/brasilia.jpg new file mode 100644 index 0000000..09c4426 Binary files /dev/null and b/template/src/img/brasilia.jpg differ diff --git a/template/src/img/fusca.jpg b/template/src/img/fusca.jpg new file mode 100644 index 0000000..1257241 Binary files /dev/null and b/template/src/img/fusca.jpg differ diff --git a/template/src/img/kombi.jpg b/template/src/img/kombi.jpg new file mode 100644 index 0000000..74a4c54 Binary files /dev/null and b/template/src/img/kombi.jpg differ