From a4d69a5898318b0d7a9bbda34832fe869177788c Mon Sep 17 00:00:00 2001
From: Rafael Leite Jereissate <50413830+jereissate@users.noreply.github.com>
Date: Fri, 1 Dec 2023 15:14:38 +0000
Subject: [PATCH] =?UTF-8?q?altera=C3=A7=C3=A3o=20de=20Logo=20+=20Counter?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/counter/index.js             | 11 ------
 src/components/counter/index.jsx            | 22 ++++++++++++
 src/components/logo/{index.js => index.jsx} | 16 +++++++--
 src/counter.js                              | 17 +++++++++
 src/main.jsx                                | 39 ++++++++++-----------
 5 files changed, 72 insertions(+), 33 deletions(-)
 delete mode 100644 src/components/counter/index.js
 create mode 100644 src/components/counter/index.jsx
 rename src/components/logo/{index.js => index.jsx} (62%)

diff --git a/src/components/counter/index.js b/src/components/counter/index.js
deleted file mode 100644
index c66ff4c..0000000
--- a/src/components/counter/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import './counter.css';
-
-export function counter() {
-  return `
-    <div class="card">
-      <button id="counter" type="button">
-        count is 0
-      </button>
-    </div>
-  `;
-}
\ No newline at end of file
diff --git a/src/components/counter/index.jsx b/src/components/counter/index.jsx
new file mode 100644
index 0000000..5db8c71
--- /dev/null
+++ b/src/components/counter/index.jsx
@@ -0,0 +1,22 @@
+import './counter.css';
+import React, { useState } from "react";
+
+// export function counter() {
+//   return `
+//     <div class="card">
+//       <button id="counter" type="button">
+//         count is 0
+//       </button>
+//     </div>
+//   `;
+// }
+export function Counter() {
+  const [counter , setCounter] = useState(0)
+  return (
+    <div className="card">
+      <button onClick={() => setCounter((i) => i + 1)} id="counter" type="button">
+        count is {counter}
+      </button>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/logo/index.js b/src/components/logo/index.jsx
similarity index 62%
rename from src/components/logo/index.js
rename to src/components/logo/index.jsx
index 84b95d8..650e820 100644
--- a/src/components/logo/index.js
+++ b/src/components/logo/index.jsx
@@ -1,5 +1,5 @@
-import './logo.css'
-
+import './logo.css';
+import React from "react";
 
 /**
  * @typedef {Object} LogoProps
@@ -16,3 +16,15 @@ export function logo({link, imgSrc, descricao}) {
     </a>
   `
 }
+/**
+ * 
+ * @param {LogoProps} props
+ * @returns
+ */
+export function Logo({link, imgSrc, descricao}){
+  return(
+  <a className="logo" href={link} target="_blank">
+  <img src={imgSrc} className="logo" alt={descricao} />
+</a>
+  )
+}
diff --git a/src/counter.js b/src/counter.js
index 63bd9b8..20f2f95 100644
--- a/src/counter.js
+++ b/src/counter.js
@@ -15,3 +15,20 @@ export function setupCounter(element) {
   element.addEventListener("click", () => setCounter(counter + 1));
   setCounter(0);
 }
+/**
+ * Configura o evento de click, adicionando um texto com contador a cada click
+ * @param {HTMLElement} element
+ */
+export function SetupCounter(element) {
+  let counter = 0;
+  /**
+   *
+   * @param {number} count
+   */
+  const SetCounter = (count) => {
+    counter = count;
+    element.innerHTML = `count is ${counter}`;
+  }
+    element.addEventListener("click", () => SetCounter(counter + 1));
+    SetCounter(0);
+}
diff --git a/src/main.jsx b/src/main.jsx
index 5652e21..cacf718 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -5,8 +5,8 @@ import viteLogo from '/vite.svg'
 import storybookLogo from '/storybook.svg'
 import { $ } from "./select";
 import './style.css'
-import { logo } from "./components/logo";
-import { counter } from "./components/counter";
+import { logo , Logo } from "./components/logo";
+import { Counter } from "./components/counter";
 
 const app = $("#app");
 
@@ -14,24 +14,23 @@ ReactDOM.createRoot(app).render(
   <React.StrictMode>
     <div>
       <h2> REACT VERSION</h2>
-      {logo({
-        link: "https://vitejs.dev",
-        imgSrc: viteLogo,
-        descricao: "Vite logo",
-      })}
-      $
-      {logo({
-        link: "https://www.typescriptlang.org/",
-        imgSrc: typescriptLogo,
-        descricao: "TypeScript logo",
-      })}
-      $
-      {logo({
-        link: "https://storybookjs.org/",
-        imgSrc: storybookLogo,
-        descricao: "Storybook logo",
-      })}
-      <h1>Vite + TypeScript + Storybook</h1>${counter()}
+      <Logo
+        link="https://vitejs.dev"
+        imgSrc={viteLogo}
+        descricao="Vite logo"
+      />
+       <Logo
+        link="https://www.typescriptlang.org/"
+        imgSrc={typescriptLogo}
+        descricao="TypeScript logo"
+      /> 
+      <Logo
+      link="https://storybookjs.org/"
+      imgSrc={storybookLogo}
+      descricao="Storybook logo"
+    />
+      <h1>Vite + TypeScript + Storybook</h1>
+      <Counter/>
       <p className="read-the-docs">
         Click on the Vite, TypeScript and Storybook logos to learn more
       </p>