✨ styles: button ghost

pages/index.tsx

@@ -1,21 +1,7 @@
 
-import { useEffect, useRef } from 'react';
-import { Inputcommon, Layout } from 'src/components/common'
-import { InputType } from 'src/utils/constanst.utils'
+import { ButtonCommon, Inputcommon, Layout } from 'src/components/common';
+import { IconBuy } from 'src/components/icons';
 export default function Home() {
-
-  const inputElementRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    setTimeout(() =>{
-      inputElementRef.current?.focus()
-    }, 1000)
-  }, [])
-  
-  const onEnter = (value: string | number) => {
-
-  }
-
   return (
     <>
       <div>This is home page</div>
@@ -23,9 +9,11 @@ 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" onEnter={onEnter} ref={inputElementRef}/>
-      <Inputcommon placeholder="Enter here" onEnter={onEnter} type={InputType.number}/>
+      <Inputcommon placeholder="Enter here" />
+      <Inputcommon placeholder="Enter here" type='number' />
       <Inputcommon placeholder="Enter here" value="23434" />
+
+      <ButtonCommon type='ghost' icon={<IconBuy/>}>Button</ButtonCommon>
     </>
   )
 }

src/components/common/ButtonCommon/ButtonCommon.module.scss

@@ -48,6 +48,18 @@
       }
     }
   }
+
+  &.ghost {
+    @apply bg-white;
+    color: var(--primary);
+    border: 1px solid var(--primary);
+    &.loading {
+      &::before {
+        border-top-color: var(--primary);
+      }
+    }
+  }
+
   &.large {
     padding: 3.2rem 4.8rem;
     &.loading {

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -5,8 +5,8 @@ import s from './ButtonCommon.module.scss'
 
 interface Props {
     children?: React.ReactNode,
-    type?: ButonType,
-    size?: ButtonSize,
+    type?: 'primary' | 'light' | 'ghost',
+    size?: 'default' | 'large',
     icon?: any,
     isIconSuffix?: boolean,
     loading?: boolean,
@@ -14,7 +14,7 @@ interface Props {
     onClick?: () => void,
 }
 
-const ButtonCommon = memo(({ type = ButonType.primary, size = ButtonSize.default,
+const ButtonCommon = memo(({ type = 'primary', size = 'default',
     icon, loading, disabled, isIconSuffix, children, onClick }: Props) => {
     return (
         <button className={classNames({

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

@@ -1,5 +1,5 @@
 @import "../../../styles/utilities";
 
 .inputCommon {
-  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+  @apply custom-border-radius bg-primary transition-all duration-200;
 }

src/components/common/InputCommon/InputCommon.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
-import { InputType, KEY } from 'src/utils/constanst.utils';
+import { KEY } from 'src/utils/constanst.utils';
 import s from './InputCommon.module.scss';
 
 type Ref = {
@@ -10,7 +10,7 @@ interface Props {
     children?: React.ReactNode,
     value?: string | number,
     placeholder?: string,
-    type?: InputType,
+    type?: 'text' | 'number',
     onChange?: (value: string | number) => void,
     onEnter?: (value: string | number) => void,
 }

src/utils/constanst.utils.ts

@@ -1,20 +1,3 @@
-
-
-export enum ButonType {
-    primary = 'primary',
-    light = 'light',
-}
-
-export enum ButtonSize {
-    default = 'default',
-    large = 'large',
-}
-
-export enum InputType {
-    text = 'text',
-    number = 'number',
-}
-
 export const KEY = {
     ENTER: 'Enter',
 }