add greeter component and spin logo on count

src/App.css

@@ -11,6 +11,9 @@
   .App-logo {
     animation: App-logo-spin infinite 20s linear;
   }
+  .App-logo.spin-reverse {
+    animation: App-logo-spin-reverse infinite 20s linear;
+  }
 }
 
 .App-header {
@@ -36,6 +39,14 @@
     transform: rotate(360deg);
   }
 }
+@keyframes App-logo-spin-reverse {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(-360deg);
+  }
+}
 
 button {
   font-size: calc(10px + 2vmin);

src/App.tsx

@@ -1,45 +1,44 @@
-import React, { useState } from 'react'
+import React, { useState } from "react";
-import logo from './logo.svg'
+import logo from "./logo.svg";
-import './App.css'
+import "./App.css";
+
+interface GreeterProps {}
+
+const Greeter: React.FC<GreeterProps> = (props) => {
+  const [name, setName] = useState("");
+  return (
+    <div>
+      <div>{name.length ? <>Hello {name}</> : <>What is your name? </>}</div>
+      <input
+        autoFocus
+        type="text"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+      />
+    </div>
+  );
+};
 
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
-
   return (
     <div className="App">
       <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+        <img
+          src={logo}
+          className={count % 2 === 0 ? "App-logo" : "App-logo spin-reverse"}
+          alt="logo"
+        />
         <p>Hello Vite + React!</p>
         <p>
           <button type="button" onClick={() => setCount((count) => count + 1)}>
             count is: {count}
           </button>
         </p>
-        <p>
+        <Greeter />
-          Edit <code>App.tsx</code> and save to test HMR updates.
-        </p>
-        <p>
-          <a
-            className="App-link"
-            href="https://reactjs.org"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Learn React
-          </a>
-          {' | '}
-          <a
-            className="App-link"
-            href="https://vitejs.dev/guide/features.html"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Vite Docs
-          </a>
-        </p>
       </header>
     </div>
-  )
+  );
 }
 
-export default App
+export default App;