From 6d828280a0353deffb93e05b476301602bc992b1 Mon Sep 17 00:00:00 2001
From: lytrankieio123 <lytran@kie.io>
Date: Tue, 24 Aug 2021 13:52:01 +0700
Subject: [PATCH] styles: input search

---
 pages/index.tsx                               |  6 ++---
 .../common/InputSearch/InputSearch.tsx        | 22 +++++++++++++++++++
 src/components/common/index.ts                |  1 +
 src/utils/language.utils.ts                   |  3 +++
 4 files changed, 29 insertions(+), 3 deletions(-)
 create mode 100644 src/components/common/InputSearch/InputSearch.tsx

diff --git a/pages/index.tsx b/pages/index.tsx
index c20682748..e803f63dc 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
 
-import { ButtonCommon, Inputcommon, Layout } from 'src/components/common';
-import { IconBuy, IconSearch } from 'src/components/icons';
+import { ButtonCommon, Inputcommon, InputSearch, Layout } from 'src/components/common';
+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>
diff --git a/src/components/common/InputSearch/InputSearch.tsx b/src/components/common/InputSearch/InputSearch.tsx
new file mode 100644
index 000000000..9c02a239c
--- /dev/null
+++ b/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
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index 4e9637e6c..22bb3c537 100644
--- a/src/components/common/index.ts
+++ b/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'
diff --git a/src/utils/language.utils.ts b/src/utils/language.utils.ts
index 4343ed9db..3f8d61926 100644
--- a/src/utils/language.utils.ts
+++ b/src/utils/language.utils.ts
@@ -3,4 +3,7 @@ export const LANGUAGE = {
         BUY_NOW: 'Buy now',
         SHOP_NOW: 'Shop now',
     },
+    PLACE_HOLDER: {
+        SEARCH: 'Search',
+    }
 }
\ No newline at end of file