From ea06caa5f2b823db46cd52e8e4785a4278a42f84 Mon Sep 17 00:00:00 2001
From: Matheus Rocha <matheus.rocha89@gmail.com>
Date: Mon, 23 Jan 2023 13:44:03 +0000
Subject: [PATCH 1/3] Creating and using a counter component

---
 src/App.tsx                               | 10 +++++--
 src/components/Counter/Counter.module.css | 14 +++++++++
 src/components/Counter/Counter.test.tsx   | 12 ++++++++
 src/components/Counter/Counter.tsx        | 35 +++++++++++++++++++++++
 src/components/Counter/index.ts           |  1 +
 src/components/index.ts                   |  1 +
 6 files changed, 70 insertions(+), 3 deletions(-)
 create mode 100644 src/components/Counter/Counter.module.css
 create mode 100644 src/components/Counter/Counter.test.tsx
 create mode 100644 src/components/Counter/Counter.tsx
 create mode 100644 src/components/Counter/index.ts
 create mode 100644 src/components/index.ts

diff --git a/src/App.tsx b/src/App.tsx
index a53698a..880fe3c 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,6 +1,7 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import { Counter } from "./components";
+import logo from "./logo.svg";
+import "./App.css";
 
 function App() {
   return (
@@ -19,6 +20,9 @@ function App() {
           Learn React
         </a>
       </header>
+      <div>
+        <Counter initialValue={0} />
+      </div>
     </div>
   );
 }
diff --git a/src/components/Counter/Counter.module.css b/src/components/Counter/Counter.module.css
new file mode 100644
index 0000000..47fe958
--- /dev/null
+++ b/src/components/Counter/Counter.module.css
@@ -0,0 +1,14 @@
+.button {
+  margin: 0 8px;
+  padding: 8px 16px;
+  font-size: 14px;
+  background-color: #00cbf0;
+  color: #ffffff;
+  font-weight: bold;
+  border: none;
+  border-radius: 4px;
+}
+
+.buttonsWrapper {
+  margin: 8px;
+}
diff --git a/src/components/Counter/Counter.test.tsx b/src/components/Counter/Counter.test.tsx
new file mode 100644
index 0000000..583a30f
--- /dev/null
+++ b/src/components/Counter/Counter.test.tsx
@@ -0,0 +1,12 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+
+import { Counter } from "./Counter";
+
+describe(Counter.name, () => {
+  it("renders correctly", () => {
+    render(<Counter initialValue={0} />);
+    const counterValue = screen.getByText("Counter: 0");
+    expect(counterValue).toBeInTheDocument();
+  });
+});
diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx
new file mode 100644
index 0000000..b057e85
--- /dev/null
+++ b/src/components/Counter/Counter.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+
+import styles from "./Counter.module.css";
+
+type CounterProps = {
+  initialValue: number;
+};
+
+const Counter = ({ initialValue = 0 }: CounterProps) => {
+  const [counter, setCounter] = useState(initialValue);
+  const increase = () => setCounter(counter + 1);
+  const decrease = () => setCounter(counter + 1);
+  const reset = () => setCounter(0);
+
+  return (
+    <>
+      <p>Counter: {counter}</p>
+      <div className={styles.buttonsWrapper}>
+        <button className={styles.button} type="button" onClick={increase}>
+          +1
+        </button>
+        <button className={styles.button} type="button" onClick={decrease}>
+          -1
+        </button>
+      </div>
+      <div>
+        <button className={styles.button} type="button" onClick={reset}>
+          Reset
+        </button>
+      </div>
+    </>
+  );
+};
+
+export { Counter };
diff --git a/src/components/Counter/index.ts b/src/components/Counter/index.ts
new file mode 100644
index 0000000..f32fe91
--- /dev/null
+++ b/src/components/Counter/index.ts
@@ -0,0 +1 @@
+export * from "./Counter";
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..f32fe91
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1 @@
+export * from "./Counter";

From c5ca5d14bbfd1ccb0176b364911495965e6ffa5e Mon Sep 17 00:00:00 2001
From: Matheus Rocha <matheus.rocha89@gmail.com>
Date: Mon, 23 Jan 2023 14:01:37 +0000
Subject: [PATCH 2/3] Change function call

---
 src/components/Counter/Counter.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Counter/Counter.tsx b/src/components/Counter/Counter.tsx
index b057e85..ea266c2 100644
--- a/src/components/Counter/Counter.tsx
+++ b/src/components/Counter/Counter.tsx
@@ -19,7 +19,7 @@ const Counter = ({ initialValue = 0 }: CounterProps) => {
         <button className={styles.button} type="button" onClick={increase}>
           +1
         </button>
-        <button className={styles.button} type="button" onClick={decrease}>
+        <button className={styles.button} type="button" onClick={increase}>
           -1
         </button>
       </div>

From efc3d1f00842d1e3a52642fc13e817260f864816 Mon Sep 17 00:00:00 2001
From: Matheus Rocha <matheus.rocha89@gmail.com>
Date: Mon, 23 Jan 2023 14:19:54 +0000
Subject: [PATCH 3/3] Add css class

---
 src/components/Counter/Counter.module.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/Counter/Counter.module.css b/src/components/Counter/Counter.module.css
index 47fe958..ed90bc1 100644
--- a/src/components/Counter/Counter.module.css
+++ b/src/components/Counter/Counter.module.css
@@ -12,3 +12,7 @@
 .buttonsWrapper {
   margin: 8px;
 }
+
+.resetButton {
+  text-transform: uppercase;
+}