alteração de Logo + Counter

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

src/components/logo/index.js → 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>
+  )
+}

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

src/main.jsx

@@ -5,33 +5,32 @@ 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");
 
 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>