styles: input search

pages/index.tsx

@@ -1,6 +1,6 @@
 
-import { ButtonCommon, Inputcommon, Layout } from 'src/components/common';
+import { ButtonCommon, Inputcommon, InputSearch, Layout } from 'src/components/common';
-import { IconBuy, IconSearch } from 'src/components/icons';
+import { IconBuy } from 'src/components/icons';
 export default function Home() {
   return (
     <>
@@ -13,7 +13,7 @@ export default function Home() {
       {/* demo  */}
       <div style={{ display: 'flex' }}>
         <Inputcommon placeholder="Enter here" />
-        <Inputcommon placeholder="Enter here" styleType='custom' icon={<IconSearch />}/>
+        <InputSearch/>
       </div>
 
       <ButtonCommon type='ghost' icon={<IconBuy />}>Button</ButtonCommon>

src/components/common/InputSearch/InputSearch.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { IconSearch } from 'src/components/icons';
+import { LANGUAGE } from 'src/utils/language.utils';
+import { Inputcommon } from '..';
+
+interface Props {
+    onChange?: (value: string | number) => void,
+    onEnter?: (value: string | number) => void,
+}
+
+const InputSearch = ({ onChange, onEnter }: Props) => {
+    return (
+        <Inputcommon placeholder={LANGUAGE.PLACE_HOLDER.SEARCH}
+            styleType='custom'
+            icon={<IconSearch />}
+            onChange={onChange}
+            onEnter={onEnter}
+        />
+    )
+}
+
+export default InputSearch

src/components/common/index.ts

@@ -5,3 +5,4 @@ export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
 export { default as ItemWishList} from './ItemWishList/ItemWishList'
 export { default as Logo} from './Logo/Logo'
 export { default as Inputcommon} from './InputCommon/InputCommon'
+export { default as InputSearch} from './InputSearch/InputSearch'

src/utils/language.utils.ts

@@ -3,4 +3,7 @@ export const LANGUAGE = {
         BUY_NOW: 'Buy now',
         SHOP_NOW: 'Shop now',
     },
+    PLACE_HOLDER: {
+        SEARCH: 'Search',
+    }
 }