add: add address page

src/components/input/SearchBox.tsx

@@ -1,22 +1,26 @@
 import React from 'react';
 import SearchIcon from '../icons/SearchIcon';
+import clsx from 'clsx';
 
-type Props = {
-  value: string;
+interface SearchboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'results'> {
   placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 };
 
-export default function SearchBox({ value, placeholder = '', onChange }: Props) {
+export default function SearchBox({ className, value, placeholder = '', onChange, ...props }: SearchboxProps) {
   return (
-    <div className="bg-white inline-flex rounded-xl px-4 h-10 w-full items-center content-center">
+    <div className={clsx(
+      "bg-white inline-flex rounded-xl px-4 h-10 w-full items-center content-center",
+      className
+    )}>
       <SearchIcon stroke="#8C90A3" />
       <input
         onChange={onChange}
         value={value}
         placeholder={placeholder}
         className="text-[#8C90A3] block outline-none border-none focus:ring-0 focus:outline-none text-sm px-[7px] h-full items-center w-full"
-        type="text"
+        type="search"
+        {...props}
       />
     </div>
   );