From feb90bc9b94f3636ede2d0059f0695fa21719f3b Mon Sep 17 00:00:00 2001
From: Osvaldo Holanda <osvaldolimah@gmail.com>
Date: Sat, 2 Dec 2023 02:52:40 +0000
Subject: [PATCH] alterando componentes counter e logo pra react

---
 src/components/counter/index.js             | 11 -----------
 src/components/counter/index.jsx            | 13 +++++++++++++
 src/components/logo/{index.js => index.jsx} | 11 ++++++-----
 src/counter.js                              | 17 -----------------
 src/counter.jsx                             | 19 +++++++++++++++++++
 src/main.jsx                                | 16 ++++++++--------
 6 files changed, 46 insertions(+), 41 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} (58%)
 delete mode 100644 src/counter.js
 create mode 100644 src/counter.jsx

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..9c073d0
--- /dev/null
+++ b/src/components/counter/index.jsx
@@ -0,0 +1,13 @@
+import './counter.css';
+import React from 'react';
+import SetupCounter from '../../counter';
+
+export function Counter() {
+  return (
+    <div className="card">
+      <button id="counter" type="button">
+        <SetupCounter />
+      </button>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/logo/index.js b/src/components/logo/index.jsx
similarity index 58%
rename from src/components/logo/index.js
rename to src/components/logo/index.jsx
index 84b95d8..4f72eb7 100644
--- a/src/components/logo/index.js
+++ b/src/components/logo/index.jsx
@@ -1,4 +1,5 @@
 import './logo.css'
+import React from 'react';
 
 
 /**
@@ -9,10 +10,10 @@ import './logo.css'
  * 
  * @param {LogoProps} props
  */
-export function logo({link, imgSrc, descricao}) {
-  return `
-    <a class="logo" href="${link}" target="_blank">
-      <img src="${imgSrc}" class="logo" alt="${descricao}" />
+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
deleted file mode 100644
index 63bd9b8..0000000
--- a/src/counter.js
+++ /dev/null
@@ -1,17 +0,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/counter.jsx b/src/counter.jsx
new file mode 100644
index 0000000..9480bad
--- /dev/null
+++ b/src/counter.jsx
@@ -0,0 +1,19 @@
+
+
+import React, { useState } from 'react';
+
+function SetupCounter() {
+  const [counter, setCounter] = useState(0);
+
+  const handleClick = () => {
+    setCounter(counter + 1);
+  };
+
+  return (
+    <div onClick={handleClick}>
+      {`count is ${counter}`}
+    </div>
+  );
+}
+
+export default SetupCounter;
diff --git a/src/main.jsx b/src/main.jsx
index 5652e21..b527168 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 } from "./components/logo";
+import { Counter } from "./components/counter";
 
 const app = $("#app");
 
@@ -14,24 +14,24 @@ ReactDOM.createRoot(app).render(
   <React.StrictMode>
     <div>
       <h2> REACT VERSION</h2>
-      {logo({
+      {Logo({
         link: "https://vitejs.dev",
         imgSrc: viteLogo,
         descricao: "Vite logo",
       })}
-      $
-      {logo({
+    
+      {Logo({
         link: "https://www.typescriptlang.org/",
         imgSrc: typescriptLogo,
         descricao: "TypeScript logo",
       })}
-      $
-      {logo({
+  
+      {Logo({
         link: "https://storybookjs.org/",
         imgSrc: storybookLogo,
         descricao: "Storybook logo",
       })}
-      <h1>Vite + TypeScript + Storybook</h1>${counter()}
+      <h1>Vite + TypeScript + Storybook</h1>{Counter()}
       <p className="read-the-docs">
         Click on the Vite, TypeScript and Storybook logos to learn more
       </p>