🔀 merge:Merge branch 'common' of github.com:KieIO/grocery-vercel-commerce into m2-datnguyen

:%s

src/components/common/Banner/Banner.module.scss

@@ -6,6 +6,7 @@
     border: 1px solid var(--primary);
   }
   &.large {
+    margin-bottom: 2.8rem;
     .inner {
       @screen xl {
         @apply bg-right-bottom;

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

@@ -5,9 +5,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
+<<<<<<< HEAD
   // padding: 1.6rem 3.2rem;
   padding: 0.8rem 1.6rem;
   width: 100%;
+=======
+  padding: 1.2rem 3.2rem;
+>>>>>>> 499221a7b8217276dbba438808a6ad3ece216a4d
   &:disabled {
     filter: brightness(0.9);
     cursor: not-allowed;
@@ -51,10 +55,24 @@
     }
   }
 
+  &.lightBorderNone {
+    @apply bg-white text-primary;
+    &.loading {
+      &::before {
+        border-top-color: var(--primary);
+      }
+    }
+  }
+
   &.ghost {
+<<<<<<< HEAD
     @apply bg-white;
     color: var(--text-active);
     border: 1px solid var(--text-active);
+=======
+    @apply bg-white text-primary;
+    border: 1px solid var(--primary);
+>>>>>>> 499221a7b8217276dbba438808a6ad3ece216a4d
     &.loading {
       &::before {
         border-top-color: var(--text-active);
@@ -70,7 +88,7 @@
   }
 
   &.large {
-    padding: 3.2rem 4.8rem;
+    padding: 1.6rem 4.8rem;
     &.onlyIcon {
       padding: 1.6rem;
     }

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -4,7 +4,7 @@ import s from './ButtonCommon.module.scss'
 
 interface Props {
     children?: React.ReactNode,
-    type?: 'primary' | 'light' | 'ghost',
+    type?: 'primary' | 'light' | 'ghost' | 'lightBorderNone',
     size?: 'default' | 'large',
     icon?: React.ReactNode,
     isIconSuffix?: boolean,

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

@@ -40,5 +40,12 @@
         border: 1px solid var(--primary);
       }
     }
+    &.bgTransparent {
+      background: rgb(227, 242, 233, 0.3);
+      color: var(--white);
+      &::placeholder {
+        color: var(--white);
+      }
+    }
   }
 }

src/components/common/InputCommon/InputCommon.tsx

@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import { KEY } from 'src/utils/constanst.utils';
 import s from './InputCommon.module.scss';
@@ -9,14 +10,15 @@ interface Props {
     children?: React.ReactNode,
     value?: string | number,
     placeholder?: string,
-    type?: 'text' | 'number',
+    type?: 'text' | 'number' | 'email',
     styleType?: 'default' | 'custom',
+    backgroundTransparent?: boolean,
     icon?: React.ReactNode,
     onChange?: (value: string | number) => void,
     onEnter?: (value: string | number) => void,
 }
 
-const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon,
+const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleType = 'default', icon, backgroundTransparent = false,
     onChange, onEnter }: Props, ref) => {
     const inputElementRef = useRef<HTMLInputElement>(null);
 
@@ -24,6 +26,10 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
         focus: () => {
             inputElementRef.current?.focus();
         },
+        getValue: () => {
+            const value = inputElementRef.current?.value || ''
+            return value
+        }
     }));
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -32,6 +38,7 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
 
     const handleKeyDown = (e: any) => {
         if (e.key === KEY.ENTER && onEnter) {
+            console.log("on enter***")
             const value = inputElementRef.current?.value || ''
             onEnter(value)
         }
@@ -49,7 +56,11 @@ const InputCommon = forwardRef<Ref, Props>(({ value, placeholder, type, styleTyp
                 placeholder={placeholder}
                 onChange={handleChange}
                 onKeyDown={handleKeyDown}
-                className={`${s.inputCommon} ${s[styleType]}`}
+                className={classNames({
+                    [s.inputCommon]: true,
+                    [s[styleType]]: true,
+                    [s.bgTransparent]: backgroundTransparent
+                })}
             />
         </div>
     )

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

@@ -1,15 +1,12 @@
-@import '../../../styles/utilities';
 
 .heartToggle{
     cursor: pointer;
     width: 2.4rem;
     height: 2.4rem;
-    path{
-        stroke: theme("colors.primary");
-    }
 }
 .isToggleOn{
     svg path{
-        stroke: theme("colors.primary");
+        stroke: var(--negative);
+        fill: var(--negative);
     }
 }

src/components/common/ItemWishList/ItemWishList.tsx

@@ -5,20 +5,17 @@ import s from './ItemWishList.module.scss'
 
 interface Props {
     isActive?: boolean,
-    onClick?: () => void
     onChange?: () => void
 }
 
-const ItemWishList = memo(({isActive, onClick, onChange}:Props) => {
-    const handleClick = () => {
-        isActive = !isActive
-    }
+const ItemWishList = memo(({isActive=false, onChange}:Props) => {
     return(
         <div className={classNames({
-            [s.heartToggle]:true, 
-            [s.isToggleOn]:isActive
+            [s.heartToggle]: true, 
+            [s.isToggleOn]: isActive
         })}
-        onClick={handleClick}>
+        onChange={onChange}
+        >
             <IconHeart />
         </div>
     )

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

@@ -5,14 +5,14 @@
     .eclipse{
         width: 3.2rem;
         height: 3.2rem;
-        background-color: theme("colors.primary");
+        background-color: var(--primary);
         border-radius: 50%;
         margin-right: 1.2rem;
     }
-    .conTent{
+    .content{
         @apply font-logo;
-        text-transform: uppercase;
-        line-height: 3.2rem;
-        letter-spacing: -0.02rem;
+        font-size: 16px;
+        line-height: 32px;
+        letter-spacing: -0.02em;
     }
 }

src/components/common/Logo/Logo.tsx

@@ -1,15 +1,11 @@
 import s from './Logo.module.scss'
 
-interface Props {
-    
-}
-
-const Logo = ({}: Props) => {
+const Logo = () => {
     return(
         <div className={s.logo}>
             <div className={s.eclipse}>
             </div>
-            <div className={s.conTent}>
+            <div className={s.content}>
                 ONLINE GROCERY
             </div>
         </div>

src/components/common/SelectCommon/SelectCommon.module.scss

@@ -0,0 +1,32 @@
+@import "../../../styles/utilities";
+
+.select{
+    @apply rounded-lg border-solid;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding: 1.2rem 1.6rem;
+    &.base{
+        width: 18.6rem;
+        height: 4.8rem;
+    }
+    &.large{
+        width: 34.25rem;
+        height: 5.6rem;
+    }
+    &.default{
+        @apply border;
+    }
+    &.custom{
+        @apply border-2;
+        border-color: var(--border-line);
+        color: var(--text-label);
+    }
+    .option{
+        &:hover{
+            background-color: black;
+        }
+    }
+}
+

src/components/common/SelectCommon/SelectCommon.tsx

@@ -0,0 +1,27 @@
+import s from './SelectCommon.module.scss'
+import classNames from 'classnames'
+
+interface Props {
+    placeHolder? : string,
+    size?: 'base' | 'large',
+    type?: 'default' | 'custom',
+    option: {name: string}[],
+}
+
+const SelectCommon = ({ type = 'default', size = 'base', option, placeHolder }: Props) => {
+    return(
+        <select className={classNames({
+            [s.select] : true,
+            [s[type]]: !!type,
+            [s[size]]: !!size,
+        })}
+        >
+            <option disabled selected hidden>{placeHolder}</option>
+            {
+                option.map(item => <option className={s.option} value={item.name}> {item.name} </option>)
+            }
+        </select>
+    )
+}
+
+export default SelectCommon

src/components/common/VideoPlayer/VideoPlayer.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import ReactPlayer from 'react-player/lazy'
+
+interface Props {
+    url: string,
+    controls?: boolean,
+    muted?: boolean,
+}
+
+const VideoPlayer = ({ url, controls, muted }: Props) => {
+    return (
+        <ReactPlayer
+            url={url}
+            controls={controls}
+            muted={muted} />
+    );
+};
+
+export default VideoPlayer;

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

@@ -1,19 +1,16 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";
 
-.viewAll{
+.viewAll {
     display: flex;
-    color: theme("colors.primary");
-    .conTent{
+    .content {
+        color: var(--primary);
         margin: 0.8rem 0.8rem 0.8rem 1.6rem;
-        font-family: var(--font-sans);
         font-weight: bold;
     }
-    .vecTor{
+    .vector {
         margin: 0.8rem 0rem 0.8rem 0rem;
-        svg path{
-            fill: theme("colors.primary");
+        svg path {
+            fill: var(--primary);
         }
     }
 }
-
-

src/components/common/ViewAllItem/ViewAllItem.tsx

@@ -3,18 +3,18 @@ import s from './ViewAllItem.module.scss'
 import Link from 'next/link'
 
 interface Props {
-    link?: string
+    link: string
 }
 
 const ViewAllItem = ({ link }: Props) => {
     return(
         <div className={s.viewAll}>
-            <Link href={"/all"}>
-                <a className={s.conTent}>
+            <Link href={link}>
+                <a className={s.content}>
                     View All
                 </a>
             </Link>
-            <div className={s.vecTor}>
+            <div className={s.vector}>
                 <IconVector />
             </div>
         </div>

src/components/common/index.ts

@@ -22,3 +22,5 @@ export { default as Banner} from './Banner/Banner'
 export { default as Footer} from './Footer/Footer'
 export { default as MenuDropdown} from './MenuDropdown/MenuDropdown'
 export { default as NotiMessage} from './NotiMessage/NotiMessage'
+export { default as VideoPlayer} from './VideoPlayer/VideoPlayer'
+export { default as SelectCommon} from './SelectCommon/SelectCommon'