Counter Component

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>
   );
 }

src/components/Counter/Counter.module.css

@@ -0,0 +1,18 @@
+.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;
+}
+
+.resetButton {
+  text-transform: uppercase;
+}

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();
+  });
+});

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={increase}>
+          -1
+        </button>
+      </div>
+      <div>
+        <button className={styles.button} type="button" onClick={reset}>
+          Reset
+        </button>
+      </div>
+    </>
+  );
+};
+
+export { Counter };

src/components/Counter/index.ts

@@ -0,0 +1 @@
+export * from "./Counter";

src/components/index.ts

@@ -0,0 +1 @@
+export * from "./Counter";