search form component

src/animations/header.animations.ts

@@ -0,0 +1,20 @@
+export const searchFormAnimation: Record<
+  string,
+  Record<string, string | number | Record<string, string | number>>
+> = {
+  rest: {
+    opacity: 1,
+    duration: 0.2,
+    type: 'tween',
+    x: 0,
+  },
+
+  hover: {
+    y: -10,
+    opacity: 0,
+    transition: {
+      duration: 0.1,
+      type: 'spring',
+    },
+  },
+};

src/components/header/SearchForm.tsx

@@ -0,0 +1,35 @@
+// Modules
+import { useState } from 'react';
+import { motion } from 'framer-motion';
+
+// Icons
+import LoopGray from '../../assets/icons/loop-gray.svg';
+
+// Animations
+import { searchFormAnimation } from '../../animations/header.animations';
+
+const SearchForm = () => {
+  const [input, setInput] = useState<string>('');
+  return (
+    <motion.div className="search-wrapper">
+      <form
+        onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
+          event.preventDefault();
+        }}>
+        <motion.div
+          initial={'rest'}
+          animate={input.length > 0 ? searchFormAnimation.hover : searchFormAnimation.rest}>
+          <img src={LoopGray} alt="" />
+          <span>Search anything</span>
+        </motion.div>
+        <input
+          type="text"
+          value={input}
+          onChange={(event: React.ChangeEvent<HTMLInputElement>) => setInput(event.target.value)}
+        />
+      </form>
+    </motion.div>
+  );
+};
+
+export default SearchForm;

src/components/header/SubHeader.tsx

@@ -1,50 +1,16 @@
 // Modules
-import { motion } from "framer-motion";
+import { Link } from 'react-router-dom';
-import { Link } from "react-router-dom";
-import { useState } from "react";
 
 // Images
-import Logo from "../../assets/images/logo.png";
+import Logo from '../../assets/images/logo.png';
 
 // Icons
-import ArrowDownBlack from "../../assets/icons/arrow-down-black.svg";
+import ArrowDownBlack from '../../assets/icons/arrow-down-black.svg';
-import LoopGray from "../../assets/icons/loop-gray.svg";
 
-const loopMotion = {
+// Components
-  rest: {
+import SearchForm from './SearchForm';
-    opacity: 0,
-    ease: "ease",
-    duration: 0.2,
-    type: "tween",
-  },
-  hover: {
-    opacity: 1,
-    ease: "ease",
-    duration: 0.2,
-    type: "tween",
-  },
-};
-
-const blockMotion = {
-  rest: {
-    opacity: 1,
-    duration: 0.2,
-    type: "tween",
-    x: 0,
-  },
-
-  hover: {
-    y: -10,
-    opacity: 0,
-    transition: {
-      duration: 0.1,
-      type: "spring",
-    },
-  },
-};
 
 const SubHeader = () => {
-  const [isTyping, setIsTyping] = useState(false);
   return (
     <div className="subheader">
       <div className="container">
@@ -78,29 +44,7 @@ const SubHeader = () => {
                 </div>
               </div>
             </div>
-            <motion.div className="search-wrapper">
+            <SearchForm />
-              <form
-                onSubmit={(event: React.FormEvent<HTMLFormElement>) => {
-                  event.preventDefault();
-                }}
-              >
-                <motion.div
-                  initial={"rest"}
-                  animate={isTyping ? blockMotion.hover : blockMotion.rest}
-                >
-                  <img src={LoopGray} alt="" />
-                  <span>Search anything</span>
-                </motion.div>
-                <input
-                  type="text"
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                    event.target.value.length > 0
-                      ? setIsTyping(true)
-                      : setIsTyping(false);
-                  }}
-                />
-              </form>
-            </motion.div>
           </div>
         </div>
       </div>