exercicios-template-components

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"
+}

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": {

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 (
+
     <div className="App">
-
-     <h1>Aula - Componentes React</h1>
+      <GlobalStyle />
+      <Estacionamento>
+        <Garagem
+          nomeGaragem={nome}
+          apresentaGaragem={apresentaGaragem}
+          carro1={carro}
+          carro2={carro2}
+          carro3={carro3}
+          carro4={carro4}
+        />
+
+        <Garagem
+          nomeGaragem={nome2}
+          apresentaGaragem={apresentaGaragem}
+
+          carro1={carro3}
+          carro2={carro4}
+          carro3={carro}
+          carro4={carro5}
+        />
+      </Estacionamento>
+
     </div>
+
   );
 }

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 (
+        <>
+            <GaragemContainer>
+                <h1> Garagem de {props.nomeGaragem}</h1>
+
+                <Botao onClick={() => props.apresentaGaragem(props.nomeGaragem)}>Apresentar Garagem </Botao>
+
+                <img src={props.carro1.imagem} alt={props.carro1.modelo} style={{ width: '100px', height: 'auto' }} />
+                <Carro carro={props.carro1} />
+
+                <img src={props.carro2.imagem} alt={props.carro1.modelo} style={{ width: '100px', height: 'auto' }}/>
+                <Carro carro={props.carro2} />
+
+                <img src={props.carro3.imagem} alt={props.carro1.modelo} style={{ width: '100px', height: 'auto' }} />
+                <Carro carro={props.carro3} />
+
+                <img src={props.carro4.imagem} alt={props.carro1.modelo} style={{ width: '100px', height: 'auto' }} />
+                <Carro carro={props.carro4} />
+
+            </GaragemContainer>
+        </>
+
+    );
+}

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;
+
+`
+

template/src/components/Carro/Carro.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default function Carro ( {carro}){
+    return(
+        <>
+        <h2> {carro.modelo}</h2>
+            <ul>
+
+                <li> Cor: {carro.cor}</li>
+                <li> Flex: {carro.flex}</li>
+                <li> Ano: {carro.ano}</li>
+
+            </ul>
+        </>
+    )
+}

template/src/components/Carro/styled.js

@@ -0,0 +1,6 @@
+import  styled  from "styled-components";
+
+export const ImgCarro =  styled.img`
+  width: 30vw;
+
+`

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;
+ }
+
+`

template/src/components/Tudo/Copywrite.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function Copywrite(){
+    return(
+        <>
+         <p> Copywrite &copy; Raissa Gomes</p>
+        </>
+    )
+}

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(
+        <>
+         <RedesSociais />
+         <Copywrite />
+
+        </>
+    )
+}

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(
+        <>
+         <h1>Aula - Componentes React</h1>
+         <img src="{image}" alt="logo" />
+        </>
+    );
+}

template/src/components/Tudo/Redes-Sociais.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export default function RedesSociais() {
+    return(
+        <>
+         <a href="www.instagram.com/raissanfg"> Instagram </a>
+        </>
+    )
+}