styles: input common

pages/index.tsx

@@ -1,6 +1,6 @@
 
 import { ButtonCommon, Inputcommon, Layout } from 'src/components/common';
-import { IconBuy } from 'src/components/icons';
+import { IconBuy, IconSearch } from 'src/components/icons';
 export default function Home() {
   return (
     <>
@@ -9,11 +9,14 @@ export default function Home() {
       <p>Go to <code>src/components</code> to make your awesome component!</p>
       <p>Go to <code>src/styles</code> to find global styles!</p>
 
-      <Inputcommon placeholder="Enter here" />
-      <Inputcommon placeholder="Enter here" type='number' />
-      <Inputcommon placeholder="Enter here" value="23434" />
 
-      <ButtonCommon type='ghost' icon={<IconBuy/>}>Button</ButtonCommon>
+      {/* demo  */}
+      <div style={{ display: 'flex' }}>
+        <Inputcommon placeholder="Enter here" />
+        <Inputcommon placeholder="Enter here" styleType='custom' icon={<IconSearch />}/>
+      </div>
+
+      <ButtonCommon type='ghost' icon={<IconBuy />}>Button</ButtonCommon>
     </>
   )
 }

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -1,13 +1,12 @@
 import classNames from 'classnames'
 import React, { memo } from 'react'
-import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
 import s from './ButtonCommon.module.scss'
 
 interface Props {
     children?: React.ReactNode,
     type?: 'primary' | 'light' | 'ghost',
     size?: 'default' | 'large',
-    icon?: any,
+    icon?: React.ReactNode,
     isIconSuffix?: boolean,
     loading?: boolean,
     disabled?: boolean,

src/components/common/InputCommon/InputCommon.module.scss

@@ -1,5 +1,43 @@
 @import "../../../styles/utilities";
 
-.inputCommon {
+.inputWrap {
-  @apply custom-border-radius transition-all duration-200;
+  @apply flex items-center relative;
+  .icon {
+    @apply absolute;
+    content: "";
+    left: 1.6rem;
+    margin-right: 1.6rem;
+    svg path {
+      fill: currentColor;
+    }
+  }
+  .icon + .inputCommon {
+    padding-left: 4.8rem;
+  }
+  .inputCommon {
+    @apply block w-full transition-all duration-200 rounded;
+    padding: 1.6rem;
+    border: 1px solid var(--border-line);
+    &:hover,
+    &:focus,
+    &:active {
+      outline: none;
+      border: 1px solid var(--primary);
+      @apply shadow-md;
+    }
+
+    &::placeholder {
+      @apply text-label;
+    }
+
+    &.custom {
+      @apply custom-border-radius border-none;
+      background: var(--gray);
+      &:hover,
+      &:focus,
+      &:active {
+        border: 1px solid var(--primary);
+      }
+    }
+  }
 }

src/components/common/InputCommon/InputCommon.tsx

@@ -11,11 +11,14 @@ interface Props {
     value?: string | number,
     placeholder?: string,
     type?: 'text' | 'number',
+    styleType?: 'default' | 'custom',
+    icon?: React.ReactNode,
     onChange?: (value: string | number) => void,
     onEnter?: (value: string | number) => void,
 }
 
-const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange, onEnter }: Props, ref) => {
+const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon,
+    onChange, onEnter }: Props, ref) => {
     const inputElementRef = useRef<HTMLInputElement>(null);
 
     useImperativeHandle(ref, () => ({
@@ -36,6 +39,10 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange
     }
 
     return (
+        <div className={s.inputWrap}>
+            {
+                icon && <span className={s.icon}>{icon}</span>
+            }
             <input
                 ref={inputElementRef}
                 value={value}
@@ -43,8 +50,9 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange
                 placeholder={placeholder}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
-            className={s.inputCommon}
+                className={`${s.inputCommon} ${s[styleType]}`}
             />
+        </div>
     )
 
 })

src/components/icons/IconSearch.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconSearch = () => {
+    return (
+        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M20.7104 19.2899L17.0004 15.6099C18.4405 13.8143 19.1379 11.5352 18.9492 9.2412C18.7605 6.94721 17.7001 4.81269 15.9859 3.27655C14.2718 1.74041 12.0342 0.919414 9.73332 0.982375C7.43243 1.04534 5.24311 1.98747 3.61553 3.61505C1.98795 5.24263 1.04582 7.43194 0.982863 9.73283C0.919903 12.0337 1.7409 14.2713 3.27704 15.9854C4.81318 17.6996 6.94769 18.76 9.24169 18.9487C11.5357 19.1374 13.8148 18.44 15.6104 16.9999L19.2904 20.6799C19.3834 20.7736 19.494 20.848 19.6158 20.8988C19.7377 20.9496 19.8684 20.9757 20.0004 20.9757C20.1324 20.9757 20.2631 20.9496 20.385 20.8988C20.5068 20.848 20.6174 20.7736 20.7104 20.6799C20.8906 20.4934 20.9914 20.2442 20.9914 19.9849C20.9914 19.7256 20.8906 19.4764 20.7104 19.2899ZM10.0004 16.9999C8.61592 16.9999 7.26255 16.5894 6.1114 15.8202C4.96026 15.051 4.06305 13.9578 3.53324 12.6787C3.00342 11.3996 2.8648 9.99214 3.1349 8.63427C3.40499 7.27641 4.07168 6.02912 5.05065 5.05016C6.02961 4.07119 7.27689 3.4045 8.63476 3.13441C9.99263 2.86431 11.4001 3.00293 12.6792 3.53275C13.9583 4.06256 15.0515 4.95977 15.8207 6.11091C16.5899 7.26206 17.0004 8.61544 17.0004 9.9999C17.0004 11.8564 16.2629 13.6369 14.9501 14.9497C13.6374 16.2624 11.8569 16.9999 10.0004 16.9999Z" fill="#3D3D3D" />
+        </svg>
+    )
+}
+
+export default IconSearch

src/components/icons/index.ts

@@ -1 +1,3 @@
 export { default as IconBuy } from './IconBuy'
+export { default as IconSearch } from './IconSearch'
+

src/styles/_base.scss

@@ -32,7 +32,8 @@
 
   --disabled: #cccccc;
   --border-line: #ebebeb;
-  --background: #f8f8f8;
+  --background: #fff;
+  --gray: #f8f8f8;
   --white: #fbfbfb;
 
   --font-size: 16px;

src/styles/_utilities.scss

@@ -89,7 +89,7 @@
         }
     }
     .custom-border-radius {
-        border-radius: 60% 10% 60% 2%/ 10% 40% 10% 50%;
+        border-radius: 60% 10% 60% 2%/ 10% 20% 10% 50%;
     }
 
     .font-heading {

tailwind.config.js

@@ -45,10 +45,11 @@ module.exports = {
         'negative-border-line': 'var(--negative-border-line)',
         'negative-light': 'var(--negative-light)',
 
-        'line': 'var(--border-line)',
+        line: 'var(--border-line)',
-        'background': 'var(--background)',
+        background: 'var(--background)',
-        'white': 'var(--white)',
+        white: 'var(--white)',
-        'disabled': 'var(--text-disabled)',
+        gray: 'var(--gray)',
+        disabled: 'var(--text-disabled)',
         
         // @deprecated (NOT use these variables)
         'primary-2': 'var(--primary-2)',