feat: create components

dashboard, header, summary and transactions table

.eslintcache

@@ -1 +1 @@
-[{"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/index.tsx":"1","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/App.tsx":"2","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/styles/global.ts":"3"},{"size":201,"mtime":1648689900760,"results":"4","hashOfConfig":"5"},{"size":176,"mtime":1648774553638,"results":"6","hashOfConfig":"5"},{"size":888,"mtime":1648776587208,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"10"},"16wifw6",{"filePath":"11","messages":"12","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"10"},{"filePath":"13","messages":"14","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/index.tsx",[],["15","16"],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/App.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/styles/global.ts",[],{"ruleId":"17","replacedBy":"18"},{"ruleId":"19","replacedBy":"20"},"no-native-reassign",["21"],"no-negated-in-lhs",["22"],"no-global-assign","no-unsafe-negation"]
+[{"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/index.tsx":"1","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/App.tsx":"2","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/styles/global.ts":"3","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/index.tsx":"4","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/styles.ts":"5","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/index.tsx":"6","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/styles.ts":"7","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/index.tsx":"8","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/styles.ts":"9","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/index.tsx":"10","/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/styles.ts":"11"},{"size":201,"mtime":1648689900760,"results":"12","hashOfConfig":"13"},{"size":262,"mtime":1648938300862,"results":"14","hashOfConfig":"13"},{"size":909,"mtime":1648944108002,"results":"15","hashOfConfig":"13"},{"size":324,"mtime":1648779011418,"results":"16","hashOfConfig":"13"},{"size":543,"mtime":1648943023772,"results":"17","hashOfConfig":"13"},{"size":263,"mtime":1648947003732,"results":"18","hashOfConfig":"13"},{"size":145,"mtime":1648937924902,"results":"19","hashOfConfig":"13"},{"size":800,"mtime":1648943380912,"results":"20","hashOfConfig":"13"},{"size":632,"mtime":1648943356142,"results":"21","hashOfConfig":"13"},{"size":761,"mtime":1648948102072,"results":"22","hashOfConfig":"13"},{"size":638,"mtime":1648948051382,"results":"23","hashOfConfig":"13"},{"filePath":"24","messages":"25","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},"16wifw6",{"filePath":"27","messages":"28","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"29","messages":"30","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"31","messages":"32","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"26"},{"filePath":"33","messages":"34","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"35","messages":"36","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"37","messages":"38","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"39","messages":"40","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"41","messages":"42","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"43","messages":"44","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"45","messages":"46","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/index.tsx",[],["47","48"],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/App.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/styles/global.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Header/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Dashboard/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/Summary/styles.ts",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/index.tsx",[],"/home/robsonnatanael/develop/ignite/chapter-II/dtmoney/src/components/TransactionsTable/styles.ts",[],{"ruleId":"49","replacedBy":"50"},{"ruleId":"51","replacedBy":"52"},"no-native-reassign",["53"],"no-negated-in-lhs",["54"],"no-global-assign","no-unsafe-negation"]

public/index.html

@@ -10,7 +10,7 @@
     <title>dtmoney</title>
 
     <link
-      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
+      href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap"
       rel="stylesheet"
     />
   </head>

src/App.tsx

@@ -1,10 +1,13 @@
+import { Dashboard } from "./components/Dashboard";
+import { Header } from "./components/Header";
 import { GlobalStyle } from "./styles/global";
 
 export function App() {
   return (
-    <div className="App">
-      <h1>Hello World</h1>
+    <>
+      <Header />
+      <Dashboard />
       <GlobalStyle />
-    </div>
+    </>
   );
 }

src/components/Dashboard/index.tsx

@@ -0,0 +1,13 @@
+import { Summary } from "../Summary";
+import { TransactionsTable } from "../TransactionsTable";
+
+import { Container } from "./styles";
+
+export function Dashboard() {
+  return (
+    <Container>
+      <Summary />
+      <TransactionsTable />
+    </Container>
+  );
+}

src/components/Dashboard/styles.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Container = styled.main`
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 2.5rem 1rem;
+`;

src/components/Header/index.tsx

@@ -0,0 +1,15 @@
+import logoImg from '../../assets/logo.svg';
+import { Container, Content } from './styles';
+
+export function Header() {
+  return (
+    <Container>
+      <Content>
+        <img src={logoImg} alt="dt money" />
+        <button type="button">
+          Nova transação
+        </button>
+      </Content>
+    </Container>
+  )
+}

src/components/Header/styles.ts

@@ -0,0 +1,29 @@
+import styled from "styled-components";
+
+export const Container = styled.header`
+  background: var(--blue);
+`;
+
+export const Content = styled.div`
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 2rem 1rem 12rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  button {
+    font-size: 1rem;
+    color: #fff;
+    background: var(--blue-light);
+    border: 0;
+    padding: 0 2rem;
+    border-radius: 0.25rem;
+    height: 3rem;
+    transition: filter 0.2s;
+
+    &:hover {
+      filter: brightness(0.9);
+    }
+  }
+`;

src/components/Summary/index.tsx

@@ -0,0 +1,33 @@
+import incomeImg from '../../assets/income.svg';
+import outcomeImg from '../../assets/outcome.svg';
+import totalImg from '../../assets/total.svg';
+
+import { Container } from "./styles";
+
+export function Summary() {
+  return (
+    <Container>
+      <div>
+        <header>
+          <p>Entradas</p>
+          <img src={incomeImg} alt="Entradas" />
+        </header>
+        <strong>R$1000,00</strong>
+      </div>
+      <div>
+        <header>
+          <p>Saídas</p>
+          <img src={outcomeImg} alt="Saídas" />
+        </header>
+        <strong>-R$500,00</strong>
+      </div>
+      <div className="highlight-background">
+        <header>
+          <p>Total</p>
+          <img src={totalImg} alt="Total" />
+        </header>
+        <strong>R$500,00</strong>
+      </div>
+    </Container>
+  );
+}

src/components/Summary/styles.ts

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 2rem;
+  margin-top: -10rem;
+
+  div {
+    background: var(--shape);
+    padding: 1.5rem 2rem;
+    border-radius: 0.25rem;
+    color: var(--text-title);
+
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    strong {
+      display: block;
+      margin-top: 1rem;
+      font-size: 2rem;
+      font-weight: 500;
+      line-height: 3rem;
+    }
+
+    &.highlight-background {
+      background: var(--green);
+      color: #fff;
+    }
+  }
+`;

src/components/TransactionsTable/index.tsx

@@ -0,0 +1,32 @@
+import { Container } from "./styles";
+
+export function TransactionsTable() {
+  return (
+    <Container>
+      <table>
+        <thead>
+          <tr>
+            <th>Título</th>
+            <th>Valor</th>
+            <th>Categoria</th>
+            <th>Data</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Desenvolvimento de website</td>
+            <td className="deposit">R$12.000</td>
+            <td>Desenvolvimento</td>
+            <td>02/04/2022</td>
+          </tr>
+          <tr>
+            <td>Financiamento Imobiliário</td>
+            <td className="withdraw">- R$700</td>
+            <td>Financiamento</td>
+            <td>05/04/2022</td>
+          </tr>
+        </tbody>
+      </table>
+    </Container>
+  );
+}

src/components/TransactionsTable/styles.ts

@@ -0,0 +1,38 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  margin-top: 4rem;
+
+  table {
+    width: 100%;
+    border-spacing: 0 0.5rem;
+
+    th {
+      color: var(--text-body);
+      font-weight: 400;
+      padding: 1rem 2rem;
+      text-align: left;
+      line-height: 1.5rem;
+    }
+
+    td {
+      padding: 1rem 2rem;
+      border: 0;
+      background: var(--shape);
+      color: var(--text-body);
+      border-radius: 0.25px;
+
+      &:first-child {
+        color: var(--text-title);
+      }
+
+      &.deposit {
+        color: var(--green);
+      }
+
+      &.withdraw {
+        color: var(--red);
+      }
+    }
+  }
+`;

src/styles/global.ts

@@ -4,6 +4,7 @@ export const GlobalStyle = createGlobalStyle`
   :root {
     --background: #f0f2f5;
     --red: #e52e4d;
+    --green: #33cc95;
     --blue: #5429cc;
     
     --blue-light: #6933ff;