styles: input common

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 {
-  @apply custom-border-radius transition-all duration-200;
+.inputWrap {
+  @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,15 +39,20 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, onChange
     }
 
     return (
-        <input
-            ref={inputElementRef}
-            value={value}
-            type={type}
-            placeholder={placeholder}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            className={s.inputCommon}
-        />
+        <div className={s.inputWrap}>
+            {
+                icon && <span className={s.icon}>{icon}</span>
+            }
+            <input
+                ref={inputElementRef}
+                value={value}
+                type={type}
+                placeholder={placeholder}
+                onChange={handleChange}
+                onKeyDown={handleKeyDown}
+                className={`${s.inputCommon} ${s[styleType]}`}
+            />
+        </div>
     )
 
 })