Make Input components modular

src/cryptometrics/components/inputs/Input.js

@@ -2,6 +2,7 @@ import classNames from "classnames";
 import React from "react";
 
 function Input({
+  className,
   placeholder,
   type,
   onChange,
@@ -26,7 +27,8 @@ function Input({
             "pr-8": symbolRight,
             "pl-3": !symbolLeft,
             "pl-8": symbolLeft,
-          }
+          },
+          className
         )}
         placeholder={placeholder}
         type={type ? type : "text"}

src/cryptometrics/components/inputs/SearchInput.js

 import React from "react";
 import { SearchIcon } from "@heroicons/react/outline";
+import Input from "./Input";
 
 function SearchInput({ onChange }) {
   return (
     <div className="relative">
-      <input
+      <Input
         className="w-52 h-12 text-base font-semibold outline-none dark:text-white px-3 pr-10 rounded-2xl bg-dark-700"
         placeholder="Search"
         type="text"
         onChange={onChange}
-      ></input>
-      <button className="absolute top-0 right-3 bottom-0 w-6">
-        <SearchIcon className="w-6 h-6 dark:text-white" />
-      </button>
+        symbolRight={<SearchIcon className="w-6 h-6 dark:text-white" />}
+      ></Input>
     </div>
   );
 }