refactor: edit classname and export icon

.gitignore

@@ -4,6 +4,7 @@
 node_modules
 /.pnp
 .pnp.js
+package-lock.json
 
 # testing
 /coverage

pages/index.tsx

@@ -1,7 +1,27 @@
 
-import { ButtonCommon, Layout, ViewAllItem, ItemWishList, Logo } from 'src/components/common'
+import { ButtonCommon, Layout, ViewAllItem, ItemWishList, Logo, SelectCommon } from 'src/components/common'
 import { IconBuy } from 'src/components/icons'
-import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
+import { ButonType, ButtonSize, } from 'src/utils/constanst.utils'
+
+const OPTION_SORT = [
+  {
+    name: 'By Name',
+  },
+  {
+    name: 'Price (Hight to Low)',
+  },
+  {
+    name: 'On Sale',
+  }
+]
+const OPTION_STATES = [
+  {
+    name: 'Việt Nam'
+  },
+  {
+    name: 'US'
+  },
+]
 export default function Home() {
   return (
     <>
@@ -14,11 +34,10 @@ export default function Home() {
       <ButtonCommon icon={<IconBuy/>} disabled isIconSuffix={true}>Button with icon disabled</ButtonCommon>
       <ButtonCommon icon={<IconBuy/>} type={ButonType.light}>Button with icon</ButtonCommon>
       <ViewAllItem link="/all"/>
-      <ItemWishList isActive={true} />
+      <ItemWishList />
       <Logo />
-      <p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
+      <SelectCommon option={OPTION_SORT} placeHolder={"Sort By"}/>
-      <p>Go to <code>src/components</code> to make your awesome component!</p>
+      <SelectCommon option={OPTION_STATES} placeHolder={"States"} type="custom" size="large"/>
-      <p>Go to <code>src/styles</code> to find global styles!</p>
     </>
   )
 }

src/components/common/ItemWishList/ItemWishList.module.scss

@@ -3,7 +3,6 @@
     cursor: pointer;
     width: 2.4rem;
     height: 2.4rem;
-
 }
 .isToggleOn{
     svg path{

src/components/common/Logo/Logo.module.scss

@@ -10,7 +10,8 @@
         margin-right: 1.2rem;
     }
     .conTent{
-        @apply font-logo sub-headline;
+        @apply font-logo;
-        font-size: var(--font-size);
+        line-height: 3.2rem;
+        letter-spacing: -0.02rem;
     }
 }

src/components/common/ViewAllItem/ViewAllItem.module.scss

@@ -3,11 +3,11 @@
 .viewAll{
     display: flex;
     color: theme("colors.primary");
-    .conTent{
+    .content{
         margin: 0.8rem 0.8rem 0.8rem 1.6rem;
         font-weight: bold;
     }
-    .vecTor{
+    .vector{
         margin: 0.8rem 0rem 0.8rem 0rem;
         svg path{
             fill: theme("colors.primary");

src/components/common/ViewAllItem/ViewAllItem.tsx

@@ -10,11 +10,11 @@ const ViewAllItem = ({ link }: Props) => {
     return(
         <div className={s.viewAll}>
             <Link href={link}>
-                <a className={s.conTent}>
+                <a className={s.content}>
                     View All
                 </a>
             </Link>
-            <div className={s.vecTor}>
+            <div className={s.vector}>
                 <IconVector />
             </div>
         </div>

src/components/common/index.ts

@@ -4,3 +4,4 @@ export { default as Head } from './Head/Head'
 export { default as ViewAllItem} from './ViewAllItem/ViewAllItem'
 export { default as ItemWishList} from './ItemWishList/ItemWishList'
 export { default as Logo} from './Logo/Logo'
+export { default as SelectCommon} from './SelectCommon/SelectCommon'

src/components/icons/index.ts

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