Versão final

package.json

@@ -9,6 +9,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "styled-components": "^5.3.0",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
@@ -34,5 +35,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "gh-pages": "^3.2.3"
   }
 }

src/App.js

@@ -1,10 +1,14 @@
 import React from 'react'
+import Header from './components/Header'
+import Main from './components/Main'
+
 
 function App() {
   return (
-    <div>
-      <p>Olá</p>
-    </div>
+    <>
+     <Header />
+     <Main />
+    </>
   );
 }
 

src/components/Card.js

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+import add from '../assets/add.svg'
+
+const Container = styled.div `
+    width: 180px;
+    margin: 0 .5rem;
+    margin-bottom: .9rem ;
+    height: fit-content;
+    border: solid 1px #E6E6E6;
+    border-radius: 4px;
+    opacity: ${props => props.active? 1: 0.5};
+
+    &:hover{
+        border-color: ${props => props.active? '#5BC0DE': ''} ;
+        cursor: ${props => props.active? 'pointer' : 'no-drop' };
+    }
+
+    &:hover .head{
+        background-color: ${props => props.active? '#5BC0DE': ''};
+        color: ${props => props.active? '#fff': ''};
+        cursor: ${props => props.active? 'pointer' : 'no-drop' };
+    }
+`
+
+const CardHead = styled.div `
+    padding: 0 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #F5F5F5;
+    border-bottom: solid 1px #E6E6E6;
+
+
+`
+
+const CardBody = styled.div `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+`
+
+const CardTexts = styled.p `
+    font-size: .9rem;
+`
+
+const CardBtn = styled.button `
+    border: none;
+    background: none;
+`
+
+const CardBtnImg = styled.img `
+    cursor: pointer;
+`
+
+const Card = ({carName,assembler, price,sort, active, click, drag}) => {
+    return(
+        <Container active={active} draggable onDragStart={drag} >
+            <CardHead className='head' active={active} >
+                <CardTexts><b>{carName}</b></CardTexts>
+                <CardBtn disabled={!active} onClick={click} >
+                    <CardBtnImg src={add} alt= "botão de adicionar" />
+                </CardBtn>
+            </CardHead>
+            <CardBody>
+                <CardTexts><b>Montadora:</b> {assembler}</CardTexts>
+                <CardTexts><b>Preço:</b> R$ {price}.000</CardTexts>
+                <CardTexts><b>Tipo:</b> {sort}</CardTexts>
+            </CardBody>
+        </Container>
+    )
+}
+
+export default Card;

src/components/CartItems.js

@@ -0,0 +1,50 @@
+import styled from 'styled-components';
+import del from '../assets/remove.svg';
+
+const Container = styled.div `
+    width: 90%;
+    border: solid 1px #5BC0DE;
+    border-radius: 4px;
+    margin: .5rem 0;
+`
+
+const CardHead = styled.div `
+    padding: 0 5px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #5BC0DE;
+    color: #fff;
+
+`
+
+const CardBody = styled.div `
+    display: flex;
+    justify-content: space-evenly;
+
+`
+
+const CardTexts = styled.p `
+    font-size: .9rem;
+`
+
+const CardBtn = styled.img `
+    cursor: pointer;
+`
+
+const CardItems = ({carName, price,sort, click}) => {
+    return(
+        <Container >
+            <CardHead>
+                <CardTexts>{carName}</CardTexts>
+                <CardBtn src= {del} alt= 'botão de deletar'  onClick={click} />
+            </CardHead>
+            <CardBody>
+                <CardTexts><b>Tipo:</b> {sort}</CardTexts>
+                <CardTexts><b>Preço:</b> R$ {price}.000 </CardTexts>
+            </CardBody>
+        </Container>
+    )
+}
+
+export default CardItems;

src/components/Header.js

@@ -0,0 +1,23 @@
+import styled from 'styled-components'
+
+
+const Container = styled.header `
+    height: 100px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`
+
+const Title = styled.h1 `
+    text-align: center;
+`
+
+const Header = () => {
+    return (
+        <Container>
+            <Title>Loja de Carros!</Title>
+        </Container>
+    )
+}
+
+export default Header;