change rotation speed by name length

src/App.tsx

@@ -2,10 +2,12 @@ import React, { useState } from "react";
 import logo from "./logo.svg";
 import "./App.css";
 
-interface GreeterProps {}
+interface GreeterProps {
+  name: string;
+  setName: (name: string) => void;
+}
 
-const Greeter: React.FC<GreeterProps> = (props) => {
+const Greeter: React.FC<GreeterProps> = ({ name, setName }) => {
-  const [name, setName] = useState("");
   return (
     <div>
       <div>{name.length ? <>Hello {name}</> : <>What is your name? </>}</div>
@@ -21,13 +23,17 @@ const Greeter: React.FC<GreeterProps> = (props) => {
 
 function App() {
   const [count, setCount] = useState(0);
+  const [name, setName] = useState("");
   return (
     <div className="App">
       <header className="App-header">
         <img
           src={logo}
-          className={count % 2 === 0 ? "App-logo" : "App-logo spin-reverse"}
+          className="App-logo"
           alt="logo"
+          style={{
+            animationDuration: `${20 / (name.length || 1)}s`
+          }}
         />
         <p>Hello Vite + React!</p>
         <p>
@@ -35,7 +41,7 @@ function App() {
             count is: {count}
           </button>
         </p>
-        <Greeter />
+        <Greeter name={name} setName={setName} />
       </header>
     </div>
   );