Exercicios Ok

src/App.js

@@ -1,6 +1,7 @@
 import React from "react";
 import CardVideo from "./Componentes/CardVideo";
 import "./styles.css";
+import Todos from "./Componentes/DivStyled";
 
 export default function App() {
   const card1 = {
@@ -12,13 +13,13 @@ export default function App() {
   return (
     <div>
       <div className="tela-inteira">
-        <header>
+        <Todos.HeaderStyled>
           <h1>LabeTube</h1>
           <input type="text" placeholder="Busca" id="campoDeBusca" />
-        </header>
+        </Todos.HeaderStyled>
 
-        <main>
-          <nav className="menu-vertical">
+        <Todos.MainStyled>
+          <Todos.NavStyled>
             <ul>
               <li className="botoes-meunu-vertical">Início</li>
               <li className="botoes-meunu-vertical">Em alta</li>
@@ -27,7 +28,7 @@ export default function App() {
               <li className="botoes-meunu-vertical">Originais</li>
               <li className="botoes-meunu-vertical">Histórico</li>
             </ul>
-          </nav>
+          </Todos.NavStyled>
 
           <section className="painel-de-videos">
             <CardVideo
@@ -36,7 +37,7 @@ export default function App() {
               textoAlternativo={card1.textoAlternativo}
             />
           </section>
-        </main>
+        </Todos.MainStyled>
 
         <footer>
           <h4>Oi! Eu moro no footer!</h4>

src/Componentes/CardVideo.js

@@ -1,12 +1,14 @@
+import { EstiloVideos } from "./EstiloVideos";
+
 function CardVideo(props) {
   function reproduzVideo(props) {
     alert("O vídeo está sendo reproduzido");
   }
   return (
-    <div className="box-pagina-principal" onClick={reproduzVideo}>
+    <EstiloVideos onClick={reproduzVideo}>
       <img src={props.image1} alt={props.textoAlternativo} />
       <h4>{props.titulo}</h4>
-    </div>
+    </EstiloVideos>
   );
 }
 

src/Componentes/EstiloVideos.js

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const EstiloVideos = styled.div`
+  display: grid;
+  grid-template-rows: 3fr, 1fr;
+  grid-template-colums: 1fr;
+  border-style: solid;
+  border-width: thin;
+  align-items: start;
+  justify-items: stretch;
+`;

src/DivStyled.js

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+const HeaderStyled = styled.header`
+  background-color: orange;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 50px;
+  height: 10%;
+`;
+
+const MainStyled = styled.main`
+  min-height: 80%;
+  display: flex;
+`;
+
+const NavStyled = styled.nav`
+  flex-basis: 200px;
+  border-right-style: solid;
+  border-right-width: thin;
+`;
+
+export default { HeaderStyled, MainStyled, NavStyled };