From ae577242c8fd1c915550a3ae5c16c7c1d77f8f4f Mon Sep 17 00:00:00 2001
From: "Glauber M. da Silva" <gmsoft.informatica@gmail.com>
Date: Fri, 29 May 2020 15:31:41 -0300
Subject: [PATCH] Aula02 react

---
 .gitignore                                    | 44 +++++++++
 fundamentos-react/.gitignore                  | 44 +++++++++
 fundamentos-react/src/App.css                 |  4 +
 fundamentos-react/src/App.jsx                 | 92 +++++++++++++------
 fundamentos-react/src/basicos/ComFilhos.jsx   | 13 ++-
 .../src/basicos/ComParametro.jsx              | 13 +--
 fundamentos-react/src/basicos/Condicional.jsx | 21 ++---
 .../src/basicos/CondicionalComIf.jsx          | 30 +++---
 fundamentos-react/src/basicos/If.jsx          | 18 ++--
 fundamentos-react/src/basicos/Primeiro.jsx    | 19 ++--
 fundamentos-react/src/basicos/Repeticao.jsx   | 37 ++++----
 .../components/comunicacao/direta/Filho.jsx   |  7 ++
 .../src/components/comunicacao/direta/Pai.jsx | 10 ++
 .../components/comunicacao/indireta/Sub.jsx   | 13 +++
 .../components/comunicacao/indireta/Super.jsx | 19 ++++
 .../comunicacao/megasena/MegaSena.jsx         | 29 ++++++
 .../src/components/contador/Botoes.jsx        | 11 +++
 .../src/components/contador/Contador.css      |  4 +
 .../src/components/contador/Contador.jsx      | 35 +++++++
 .../src/components/contador/Display.jsx       |  5 +
 .../src/components/contador/PassoForm.jsx     | 17 ++++
 .../src/components/form/Input.jsx             | 14 +++
 .../src/components/layout/Card.jsx            | 29 ++++--
 .../src/components/switch/Switch.css          | 38 ++++++++
 .../src/components/switch/Switch.jsx          | 23 +++++
 fundamentos-react/src/data/produtos.js        |  8 +-
 fundamentos-react/src/index.css               |  5 +
 27 files changed, 481 insertions(+), 121 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 fundamentos-react/.gitignore
 create mode 100644 fundamentos-react/src/components/comunicacao/direta/Filho.jsx
 create mode 100644 fundamentos-react/src/components/comunicacao/direta/Pai.jsx
 create mode 100644 fundamentos-react/src/components/comunicacao/indireta/Sub.jsx
 create mode 100644 fundamentos-react/src/components/comunicacao/indireta/Super.jsx
 create mode 100644 fundamentos-react/src/components/comunicacao/megasena/MegaSena.jsx
 create mode 100644 fundamentos-react/src/components/contador/Botoes.jsx
 create mode 100644 fundamentos-react/src/components/contador/Contador.css
 create mode 100644 fundamentos-react/src/components/contador/Contador.jsx
 create mode 100644 fundamentos-react/src/components/contador/Display.jsx
 create mode 100644 fundamentos-react/src/components/contador/PassoForm.jsx
 create mode 100644 fundamentos-react/src/components/form/Input.jsx
 create mode 100644 fundamentos-react/src/components/switch/Switch.css
 create mode 100644 fundamentos-react/src/components/switch/Switch.jsx

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..cf2254e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,44 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/fundamentos-react/.gitignore b/fundamentos-react/.gitignore
new file mode 100644
index 0000000..cf2254e
--- /dev/null
+++ b/fundamentos-react/.gitignore
@@ -0,0 +1,44 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# dependencies
+/node_modules
+node_modules
+
+# profiling files
+chrome-profiler-events.json
+speed-measure-plugin.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/fundamentos-react/src/App.css b/fundamentos-react/src/App.css
index bc9e087..ba9ceb3 100644
--- a/fundamentos-react/src/App.css
+++ b/fundamentos-react/src/App.css
@@ -1,4 +1,8 @@
 .App{
+    display: flex;
+    flex-direction: column;
+}
+.Cards{
     display: flex;
     flex-wrap: wrap;
 }
\ No newline at end of file
diff --git a/fundamentos-react/src/App.jsx b/fundamentos-react/src/App.jsx
index 65b5398..ab9b9f1 100644
--- a/fundamentos-react/src/App.jsx
+++ b/fundamentos-react/src/App.jsx
@@ -1,40 +1,76 @@
-import './App.css'
-import React from 'react'
-import Primeiro from './basicos/Primeiro'
+import "./App.css";
+import React, { useState } from "react";
+import Primeiro from "./basicos/Primeiro";
 
-import ComParametro from './basicos/ComParametro'
-import ComFilhos from './basicos/ComFilhos'
-import Card from './components/layout/Card'
-import Repeticao from './basicos/Repeticao'
-import Condicional from './basicos/Condicional'
-import CondicionalComIf from './basicos/CondicionalComIf'
+import ComParametro from "./basicos/ComParametro";
+import ComFilhos from "./basicos/ComFilhos";
+import Card from "./components/layout/Card";
+import Repeticao from "./basicos/Repeticao";
+import Condicional from "./basicos/Condicional";
+import CondicionalComIf from "./basicos/CondicionalComIf";
+import Switch from "./components/switch/Switch";
+import Pai from "./components/comunicacao/direta/Pai";
+import Super from "./components/comunicacao/indireta/Super";
+import Input from "./components/form/Input";
+import Contador from "./components/contador/Contador";
+import MegaSena from "./components/comunicacao/megasena/MegaSena";
 
-export default props =>(
+export default (props) => {
+  const [value, setValue] = useState(false);
+
+  return (
     <div className="App">
-        <Card titulo="#01 - Primeiro Componente">
-            <Primeiro/>
+      <h1>Fundamentos React</h1>
+      <div className="Cards">
+        <Card titulo="#01 - Primeiro Componente" color="#E94C6F">
+          <Primeiro />
         </Card>
-        <Card titulo="#02 - Componente Com Parametro">
-            <ComParametro titulo="Meu titulo" subtitulo="Meu subtitulo component"/>
+        <Card titulo="#02 - Componente Com Parametro" color="#FA6900">
+          <ComParametro
+            titulo="Meu titulo"
+            subtitulo="Meu subtitulo component"
+          />
+          <Switch
+            isOn={value}
+            onColor="#06d6a0"
+            handleToggle={() => setValue(!value)}
+          />
         </Card>
-        <Card titulo="#03 - Componente com Filhos">
-        <ComFilhos>
+        <Card titulo="#03 - Componente com Filhos" color="#E8B71A">
+          <ComFilhos>
             <ul>
-                <li>Ana</li>
-                <li>Bia</li>
-                <li>Carlos</li>
-                <li>Daniel</li>
+              <li>Ana</li>
+              <li>Bia</li>
+              <li>Carlos</li>
+              <li>Daniel</li>
             </ul>
-        </ComFilhos>
+          </ComFilhos>
+        </Card>
+        <Card titulo="#04 - Repetição - Listagem de dados" color="#D96459">
+          <Repeticao />
+        </Card>
+        <Card titulo="#05 - Condicional" color="#FFC33C">
+          <Condicional numero={105} />
+        </Card>
+        <Card titulo="#06 - Condicional Com IF" color="#DC403B">
+          <CondicionalComIf numero={10} />
+        </Card>
+        <Card titulo="#07 - Comunicação Direta" color="#DC403B">
+          <Pai />
+        </Card>
+        <Card titulo="#08 - Comunicação Indireta" color="#78C0A8">
+          <Super sobrenome="Santos" />
         </Card>
-        <Card titulo="#04 - Repetição - Listagem de dados">
-            <Repeticao/>
+        <Card titulo="#09 - Input" color="#FF432E">
+          <Input />
         </Card>
-        <Card titulo="#05 - Condicional">
-            <Condicional numero={105}/>
+        <Card titulo="#10 - Contador"color="#9B539C">
+          <Contador  passo={10} valor={100} />
         </Card>
-        <Card titulo="#06 - Condicional Com IF">
-            <CondicionalComIf numero={10}/>
+        <Card titulo="#11 - Gerador MegaSena"color="#260126">
+          <MegaSena qtddeNumero={8}></MegaSena>
         </Card>
+      </div>
     </div>
-)
\ No newline at end of file
+  );
+};
diff --git a/fundamentos-react/src/basicos/ComFilhos.jsx b/fundamentos-react/src/basicos/ComFilhos.jsx
index 6871fe1..f5ddc59 100644
--- a/fundamentos-react/src/basicos/ComFilhos.jsx
+++ b/fundamentos-react/src/basicos/ComFilhos.jsx
@@ -1,9 +1,8 @@
-import React from 'react'
+import React from "react";
 
-export default props =>
-<div>
+export default (props) => (
+  <div>
     <h2>Os Filhos:</h2>
-    <div>
-        {props.children}
-    </div>
-</div>
\ No newline at end of file
+    <div>{props.children}</div>
+  </div>
+);
diff --git a/fundamentos-react/src/basicos/ComParametro.jsx b/fundamentos-react/src/basicos/ComParametro.jsx
index c22cff8..8e03435 100644
--- a/fundamentos-react/src/basicos/ComParametro.jsx
+++ b/fundamentos-react/src/basicos/ComParametro.jsx
@@ -1,7 +1,8 @@
-import React from 'react'
+import React from "react";
 
-export default props => 
-        <>
-            <h3>{props.titulo}</h3>
-            <p>{props.subtitulo}</p>
-        </>
\ No newline at end of file
+export default (props) => (
+  <>
+    <h3>{props.titulo}</h3>
+    <p>{props.subtitulo}</p>
+  </>
+);
diff --git a/fundamentos-react/src/basicos/Condicional.jsx b/fundamentos-react/src/basicos/Condicional.jsx
index ff63865..96abc9a 100644
--- a/fundamentos-react/src/basicos/Condicional.jsx
+++ b/fundamentos-react/src/basicos/Condicional.jsx
@@ -1,13 +1,10 @@
-import React from 'react'
+import React from "react";
 
-export default props => {
-    return (
-        <div>
-            <h2>O número é {props.numero}</h2>
-            {props.numero % 2 === 0 
-                    ?<span>Par</span>
-                    :<span>Impar</span>
-            }
-        </div>
-    )
-}
\ No newline at end of file
+export default (props) => {
+  return (
+    <div>
+      <h2>O número é {props.numero}</h2>
+      {props.numero % 2 === 0 ? <span>Par</span> : <span>Impar</span>}
+    </div>
+  );
+};
diff --git a/fundamentos-react/src/basicos/CondicionalComIf.jsx b/fundamentos-react/src/basicos/CondicionalComIf.jsx
index f279556..c71160a 100644
--- a/fundamentos-react/src/basicos/CondicionalComIf.jsx
+++ b/fundamentos-react/src/basicos/CondicionalComIf.jsx
@@ -1,17 +1,17 @@
-import React from 'react'
+import React from "react";
 
-import If from './If'
+import If from "./If";
 
-export default props => {
-    return (
-        <div>
-            <h2>O número é {props.numero}</h2>
-            <If test={props.numero % 2 === 0}>
-                <span>Par</span>
-            </If>
-            <If test={props.numero % 2 === 1}>
-                <span>Impar</span>
-            </If>
-        </div>
-    )
-}
\ No newline at end of file
+export default (props) => {
+  return (
+    <div>
+      <h2>O número é {props.numero}</h2>
+      <If test={props.numero % 2 === 0}>
+        <span>Par</span>
+      </If>
+      <If test={props.numero % 2 === 1}>
+        <span>Impar</span>
+      </If>
+    </div>
+  );
+};
diff --git a/fundamentos-react/src/basicos/If.jsx b/fundamentos-react/src/basicos/If.jsx
index bd9f079..65b895d 100644
--- a/fundamentos-react/src/basicos/If.jsx
+++ b/fundamentos-react/src/basicos/If.jsx
@@ -1,11 +1,7 @@
-export default function(props)
-{
-    if(props.test)
-    {
-        return props.children
-    }
-    else
-    {
-        return false;
-    }
-}
\ No newline at end of file
+export default function (props) {
+  if (props.test) {
+    return props.children;
+  } else {
+    return false;
+  }
+}
diff --git a/fundamentos-react/src/basicos/Primeiro.jsx b/fundamentos-react/src/basicos/Primeiro.jsx
index 3300990..5ecd21e 100644
--- a/fundamentos-react/src/basicos/Primeiro.jsx
+++ b/fundamentos-react/src/basicos/Primeiro.jsx
@@ -1,13 +1,12 @@
-import React from 'react'
+import React from "react";
 
-function Primeiro(){
-    return (
-            <div>
-                <h1>Primeiro componente</h1>
-                <h2>Exemplo de componente React</h2>
-            </div>
-            )
+function Primeiro() {
+  return (
+    <div>
+      <h1>Primeiro componente</h1>
+      <h2>Exemplo de componente React</h2>
+    </div>
+  );
 }
 
-
-export default Primeiro
\ No newline at end of file
+export default Primeiro;
diff --git a/fundamentos-react/src/basicos/Repeticao.jsx b/fundamentos-react/src/basicos/Repeticao.jsx
index 36c5661..f7373e4 100644
--- a/fundamentos-react/src/basicos/Repeticao.jsx
+++ b/fundamentos-react/src/basicos/Repeticao.jsx
@@ -1,19 +1,20 @@
-import React from 'react'
-import produtos from '../data/produtos'
+import React from "react";
+import produtos from "../data/produtos";
 
-export default props =>{
-    function getProdutosListItem(){
-        return produtos.map(prod=>{
-            return <li key={prod.id}>
-                {prod.id} - {prod.nome} -> R$ {prod.preco}</li>
-        })
-    }
-    return (
-        <div>
-            <h2>Repetição</h2>
-            <ul>
-                {getProdutosListItem()}
-            </ul>
-        </div>
-    )
-}
\ No newline at end of file
+export default (props) => {
+  function getProdutosListItem() {
+    return produtos.map((prod) => {
+      return (
+        <li key={prod.id}>
+          {prod.id} - {prod.nome} -> R$ {prod.preco}
+        </li>
+      );
+    });
+  }
+  return (
+    <div>
+      <h2>Repetição</h2>
+      <ul>{getProdutosListItem()}</ul>
+    </div>
+  );
+};
diff --git a/fundamentos-react/src/components/comunicacao/direta/Filho.jsx b/fundamentos-react/src/components/comunicacao/direta/Filho.jsx
new file mode 100644
index 0000000..2a5b163
--- /dev/null
+++ b/fundamentos-react/src/components/comunicacao/direta/Filho.jsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+export default (props) => (
+  <div>
+    <p>{props.children} {props.sobrenome}</p>
+  </div>
+);
diff --git a/fundamentos-react/src/components/comunicacao/direta/Pai.jsx b/fundamentos-react/src/components/comunicacao/direta/Pai.jsx
new file mode 100644
index 0000000..3f17921
--- /dev/null
+++ b/fundamentos-react/src/components/comunicacao/direta/Pai.jsx
@@ -0,0 +1,10 @@
+import React from "react";
+import Filho from "./Filho";
+
+export default (props) => (
+  <div>
+    <Filho sobrenome="Marcelino">Glauber</Filho>
+    <Filho sobrenome="Silva" >Adriano</Filho>
+    <Filho sobrenome="Santos" >Gabriel</Filho>
+  </div>
+);
diff --git a/fundamentos-react/src/components/comunicacao/indireta/Sub.jsx b/fundamentos-react/src/components/comunicacao/indireta/Sub.jsx
new file mode 100644
index 0000000..f09d6bc
--- /dev/null
+++ b/fundamentos-react/src/components/comunicacao/indireta/Sub.jsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export default (props) => {
+  function acao() {
+    props.onClicar(Math.random(),"Gerado");
+  }
+
+  return (
+    <div>
+      <button onClick={acao}>Alterar</button>
+    </div>
+  );
+};
diff --git a/fundamentos-react/src/components/comunicacao/indireta/Super.jsx b/fundamentos-react/src/components/comunicacao/indireta/Super.jsx
new file mode 100644
index 0000000..8e36731
--- /dev/null
+++ b/fundamentos-react/src/components/comunicacao/indireta/Super.jsx
@@ -0,0 +1,19 @@
+import React, {useState} from "react";
+import Sub from "./Sub";
+
+export default (props) => {
+const [num, setNum] = useState(0)
+const [texto, setTexto] = useState('Valor')
+
+  function quandoClicar(valorGerado,texto) {
+    setNum(valorGerado)
+    setTexto(texto)
+  }
+
+  return (
+    <div>
+      <h4>{texto}: {num}</h4>
+      <Sub onClicar={quandoClicar}></Sub>
+    </div>
+  );
+};
diff --git a/fundamentos-react/src/components/comunicacao/megasena/MegaSena.jsx b/fundamentos-react/src/components/comunicacao/megasena/MegaSena.jsx
new file mode 100644
index 0000000..3742948
--- /dev/null
+++ b/fundamentos-react/src/components/comunicacao/megasena/MegaSena.jsx
@@ -0,0 +1,29 @@
+import React, { useState } from "react";
+
+export default (props) => {
+  const [numeros, setNumeros] = useState(Array(props.qtddeNumero).fill(0));
+
+  function gerarNumerosNaoContido(array) {
+    const min = 1;
+    const max = 60;
+    const novoNumero = parseInt(Math.random() * (max - min)) + min;
+
+    return array.includes(novoNumero)
+      ? gerarNumerosNaoContido(array)
+      : novoNumero;
+  }
+  function GerarNumeros() {
+      const novoArray = Array(props.qtddeNumero)
+      .fill(0)
+      .reduce(a=> [...a,gerarNumerosNaoContido(a)],[])
+      .sort((a,b) => a-b)
+    setNumeros(novoArray);
+  }
+  return (
+    <div>
+      <h3>Mega</h3>
+      <h4>{numeros.join(" ")}</h4>
+      <button onClick={GerarNumeros}>Gerar Número</button>
+    </div>
+  );
+};
diff --git a/fundamentos-react/src/components/contador/Botoes.jsx b/fundamentos-react/src/components/contador/Botoes.jsx
new file mode 100644
index 0000000..d4218fa
--- /dev/null
+++ b/fundamentos-react/src/components/contador/Botoes.jsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+
+export default (props) =>{
+    return (
+        <div>
+        <button onClick={props.onInc}>+</button>
+        <button onClick={props.onDec}>-</button>
+      </div>
+    )
+}
\ No newline at end of file
diff --git a/fundamentos-react/src/components/contador/Contador.css b/fundamentos-react/src/components/contador/Contador.css
new file mode 100644
index 0000000..68d4454
--- /dev/null
+++ b/fundamentos-react/src/components/contador/Contador.css
@@ -0,0 +1,4 @@
+.Contador input{
+    font-size: 1.4rem;
+    width: 60px;
+}
\ No newline at end of file
diff --git a/fundamentos-react/src/components/contador/Contador.jsx b/fundamentos-react/src/components/contador/Contador.jsx
new file mode 100644
index 0000000..d037d5c
--- /dev/null
+++ b/fundamentos-react/src/components/contador/Contador.jsx
@@ -0,0 +1,35 @@
+import "./Contador.css";
+import React, { Component } from "react";
+import Display from "./Display";
+import PassoForm from "./PassoForm";
+import Botoes from './Botoes'
+
+export default class Contador extends Component {
+  state = {
+    passo: this.props.passo || 1,
+    valor: this.props.valor || 0,
+  };
+  inc = () => {
+    this.setState({
+      valor: this.state.valor + this.state.passo,
+    });
+  };
+  dec = () => {
+    this.setState({
+      valor: this.state.valor - this.state.passo,
+    });
+  };
+  mudarPasso = (novoPasso) => {
+    this.setState({ passo: novoPasso });
+  };
+  render() {
+    return (
+      <div className="Contador">
+        <h2>Contador</h2>
+        <PassoForm passo={this.state.passo} onPassoChange={this.mudarPasso} />
+        <Display valor={this.state.valor}></Display>
+        <Botoes onInc={this.inc} onDec={this.dec}></Botoes>
+      </div>
+    );
+  }
+}
diff --git a/fundamentos-react/src/components/contador/Display.jsx b/fundamentos-react/src/components/contador/Display.jsx
new file mode 100644
index 0000000..c7c920e
--- /dev/null
+++ b/fundamentos-react/src/components/contador/Display.jsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export default (props) =>{
+    return (<h4>Valor: {props.valor}</h4>)
+}
\ No newline at end of file
diff --git a/fundamentos-react/src/components/contador/PassoForm.jsx b/fundamentos-react/src/components/contador/PassoForm.jsx
new file mode 100644
index 0000000..0dcd913
--- /dev/null
+++ b/fundamentos-react/src/components/contador/PassoForm.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+
+export default (props) => {
+  return (
+    <div>
+      <label htmlFor="InputContador">Passo: </label>
+      <input
+        id="InputContador"
+        type="number"
+        value={props.passo}
+        onChange={(e) => {
+          props.onPassoChange(+e.target.value);
+        }}
+      />
+    </div>
+  );
+};
diff --git a/fundamentos-react/src/components/form/Input.jsx b/fundamentos-react/src/components/form/Input.jsx
new file mode 100644
index 0000000..ee05098
--- /dev/null
+++ b/fundamentos-react/src/components/form/Input.jsx
@@ -0,0 +1,14 @@
+import React, {useState} from "react";
+
+export default (props) => {
+
+    const [nome,setNome] = useState('Pedro')
+
+
+  return (
+    <>
+    <h3>{nome}</h3>
+      <input type="text" value={nome} onChange={e => setNome(e.target.value)}></input>
+    </>
+  );
+};
diff --git a/fundamentos-react/src/components/layout/Card.jsx b/fundamentos-react/src/components/layout/Card.jsx
index a6892e0..57f5132 100644
--- a/fundamentos-react/src/components/layout/Card.jsx
+++ b/fundamentos-react/src/components/layout/Card.jsx
@@ -1,12 +1,21 @@
-import './Card.css'
-import React from 'react'
+import "./Card.css";
+import React from "react";
 
-export default props =>
-<div className="Card">
-    <div className="Conteudo">
-        {props.children}
+export default (props) => (
+  <div
+    className="Card"
+    style={{
+      borderColor: props.color || "#000",
+    }}
+  >
+    <div className="Conteudo">{props.children}</div>
+    <div
+      className="Footer"
+      style={{
+        backgroundColor: props.color || "#000",
+      }}
+    >
+      {props.titulo}
     </div>
-    <div className="Footer">
-        {props.titulo}
-    </div>
-</div>
\ No newline at end of file
+  </div>
+);
diff --git a/fundamentos-react/src/components/switch/Switch.css b/fundamentos-react/src/components/switch/Switch.css
new file mode 100644
index 0000000..567fee7
--- /dev/null
+++ b/fundamentos-react/src/components/switch/Switch.css
@@ -0,0 +1,38 @@
+.react-switch-checkbox{
+    height: 0;
+    width: 0;
+    visibility: hidden;
+}
+
+.react-switch-label{
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    cursor: pointer;
+    width: 50px;
+    height: 28px;
+    background: grey;
+    border-radius: 100px;
+    position: relative;
+    transition: background-color .2s;
+}
+.react-switch-label .react-switch-button{
+    content: '';
+    position: absolute;
+    top: 1px;
+    left: 2px;
+    width: 25px;
+    height: 25px;
+    border-radius: 25px;
+    transition: 0.2s;
+    background: #fff;
+    box-shadow: 0 0 2px 0 rgba(10,10,10,0.29);
+}
+
+.react-switch-checkbox:checked + .react-switch-label .react-switch-button{
+    left: calc(100% - 2px);
+    transform: translateX(-100%);
+}
+.react-switch-label:active .react-switch-button{
+    width: 46px;
+}
\ No newline at end of file
diff --git a/fundamentos-react/src/components/switch/Switch.jsx b/fundamentos-react/src/components/switch/Switch.jsx
new file mode 100644
index 0000000..efd7f3e
--- /dev/null
+++ b/fundamentos-react/src/components/switch/Switch.jsx
@@ -0,0 +1,23 @@
+import "./Switch.css";
+import React from "react";
+
+export default ({ isOn, handleToggle, onColor }) => {
+  return (
+    <div>
+      <input
+        checked={isOn}
+        onChange={handleToggle}
+        className="react-switch-checkbox"
+        type="checkbox"
+        id={`react-switch-new`}
+      />
+      <label
+        htmlFor={`react-switch-new`}
+        className="react-switch-label"
+        style={{ background: isOn && onColor }}
+      >
+        <span className={`react-switch-button`} />
+      </label>
+    </div>
+  );
+};
diff --git a/fundamentos-react/src/data/produtos.js b/fundamentos-react/src/data/produtos.js
index acba854..acddf0d 100644
--- a/fundamentos-react/src/data/produtos.js
+++ b/fundamentos-react/src/data/produtos.js
@@ -1,5 +1,5 @@
 export default [
-        {id:1,nome:"Caneta",preco:7.59},
-        {id:2,nome:"Lapis",preco:3.89},
-        {id:3,nome:"Caderno",preco:18.30}
-]
\ No newline at end of file
+  { id: 1, nome: "Caneta", preco: 7.59 },
+  { id: 2, nome: "Lapis", preco: 3.89 },
+  { id: 3, nome: "Caderno", preco: 18.3 },
+];
diff --git a/fundamentos-react/src/index.css b/fundamentos-react/src/index.css
index 59c61fe..6a7510f 100644
--- a/fundamentos-react/src/index.css
+++ b/fundamentos-react/src/index.css
@@ -5,6 +5,11 @@ body{
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     font-weight: 300;
     font-size: 1.4rem;
+
+    background: #232526;  /* fallback for old browsers */
+background: -webkit-linear-gradient(to bottom, #414345, #232526);  /* Chrome 10-25, Safari 5.1-6 */
+background: linear-gradient(to bottom, #414345, #232526); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
 }
 
 h1,h2{