🔀 merge: common to m1-datnguyen

:%s

pages/index.tsx

@@ -1,6 +1,8 @@
 
-import { useState } from 'react'
-import {CarouselCommon, LabelCommon, Layout, QuanittyInput } from 'src/components/common'
+import { ButtonCommon, Layout } from 'src/components/common'
+import { IconBuy } from 'src/components/icons'
+import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
+import {CarouselCommon, LabelCommon, QuanittyInput } from 'src/components/common'
 const dataTest = [{
   text:1
 },{
@@ -26,6 +28,13 @@ export default function Home() {
       <LabelCommon type="waiting">Waitting</LabelCommon>
       <LabelCommon type="delivering" >Delivering</LabelCommon>
       <LabelCommon type="delivered">Delivered</LabelCommon>
+      <ButtonCommon loading={true}>Button default</ButtonCommon>
+      <ButtonCommon type={ButonType.light} >{ButonType.light} -  Button light</ButtonCommon>
+      <ButtonCommon type={ButonType.light} disabled>{ButonType.light} -  Button light</ButtonCommon>
+      <ButtonCommon type={ButonType.light} loading = {true}>{ButonType.light} -  Button light</ButtonCommon>
+      <ButtonCommon size={ButtonSize.large} loading={true}>{ButtonSize.large} - Button default large</ButtonCommon>
+      <ButtonCommon icon={<IconBuy/>} disabled>Button with icon disabled</ButtonCommon>
+      <ButtonCommon icon={<IconBuy/>} type={ButonType.light}>Button with icon</ButtonCommon>
     </>
   )
 }

src/components/common/ButtonCommon/ButtonCommon.module.css

@@ -1,5 +0,0 @@
-/* style demo here */
-
-.buttonCommon {
-  color: red;
-}

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

@@ -0,0 +1,77 @@
+@import "../../../styles/utilities";
+
+.buttonCommon {
+  @apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.6rem 3.2rem;
+  &:disabled {
+    filter: brightness(0.9);
+    cursor: not-allowed;
+    color: var(--disabled);
+  }
+  &.loading {
+    &::before {
+      content: "";
+      border-radius: 50%;
+      width: 1.6rem;
+      height: 1.6rem;
+      border: 3px solid rgba(170, 170, 170, 0.5);
+      border-top: 3px solid var(--white);
+      -webkit-animation: spin 2s linear infinite;
+      animation: spin 2s linear infinite;
+      margin-right: 0.8rem;
+    }
+  }
+  &:hover {
+    @apply shadow-md;
+    &:not(:disabled) {
+      filter: brightness(1.05);
+    }
+  }
+
+  &:focus {
+    outline: none;
+    filter: brightness(1.05);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--text-active);
+  }
+
+  &.light {
+    @apply text-base bg-white;
+    border: 1px solid var(--text-active);
+    &.loading {
+      &::before {
+        border-top-color: var(--primary);
+      }
+    }
+  }
+  &.large {
+    padding: 3.2rem 4.8rem;
+    &.loading {
+      &::before {
+        width: 2.4rem;
+        height: 2.4rem;
+      }
+    }
+  }
+
+  .icon {
+    margin-right: 0.8rem;
+    svg path {
+      fill: currentColor;
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/common/ButtonCommon/ButtonCommon.tsx

@@ -1,14 +1,35 @@
-import { FC, useRef, useEffect } from 'react'
-import s from './ButtonCommon.module.css'
+import classNames from 'classnames'
+import React from 'react'
+import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
+import s from './ButtonCommon.module.scss'
 
 interface Props {
-    className?: string
-    children?: any
+    children?: any,
+    type?: ButonType,
+    size?: ButtonSize,
+    icon?: any,
+    loading?: boolean,
+    disabled?: boolean,
+    onClick?: () => void,
 }
 
-const ButtonCommon: FC<Props> = ({ }) => {
+const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default,
+    icon, loading, disabled, children, onClick }: Props) => {
     return (
-        <div className={s.buttonCommon}>This is button common</div>
+        <button className={classNames({
+            [s.buttonCommon]: true,
+            [s[type]]: !!type,
+            [s[size]]: !!size,
+            [s.loading]: loading,
+        })}
+            disabled={disabled}
+            onClick={onClick}
+        >
+            {
+                icon && <span className={s.icon}>{icon}</span>
+            }
+            <span className={s.label}>{children}</span>
+        </button>
     )
 }
 

src/components/common/Header/Header.module.scss

@@ -1,21 +1,22 @@
-@import '../../../styles/utilities';
+@import "../../../styles/utilities";
 
 .header {
   .btn {
-    @apply font-bold py-2 px-4 rounded;
+    // @apply font-bold py-2 px-4 rounded;
   }
   .btnBlue {
     @apply bg-primary hover:bg-warning text-label font-bold py-2 px-4 custom-border-radius;
-    
   }
   .link {
     color: theme("colors.warning");
   }
   .heading {
-    @apply text-base;
+    @apply text-base font-heading;
   }
-
   .paragraph {
     @apply topline;
   }
+  .logo {
+    @apply font-logo;
+  }
 }

src/components/common/Header/Header.tsx

@@ -9,28 +9,9 @@ interface Props {
 const Header: FC<Props> = ({ }: Props) => {
     return (
         <div className={s.header}>
-            {/* This is Header
-            <button className={s.btnBlue}>
-                Button
-            </button>
-            <button className={s.btn}>
-                Button
-            </button>
-            <div className={s.link}>
-                Test link style
-            </div>
-            <h1 className="heading-1">
-                HEADING 1
-            </h1>
-            <p className="spacing-horizontal">
-                Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sunt delectus, atque aliquid repudiandae debitis dolor facere impedit alias nemo dolores voluptatum? Commodi, delectus. Dignissimos aspernatur nobis, distinctio delectus eligendi nisi illo tempore non nostrum, molestias excepturi dolor culpa fugiat rem perspiciatis. Repellendus numquam quisquam possimus natus vero recusandae, ipsam earum ratione quos ex consectetur cum nostrum modi amet odit fugiat fugit. Facere cum enim dignissimos molestias facilis error dicta exercitationem, delectus voluptates fuga laboriosam esse sunt odio, impedit modi veritatis, nisi nam? Voluptatum voluptas similique aspernatur. Soluta, accusamus! Mollitia praesentium adipisci perspiciatis iusto dolorum sint sit placeat, nesciunt id repellendus.
-            </p>
-            <p className="spacing-horizontal-left">
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque doloremque quos excepturi laborum maiores laudantium hic iusto natus? Ipsa deleniti quas odit! Labore esse enim ipsam tempora tenetur beatae maxime officiis est, a illo! Soluta suscipit maxime odit eveniet laudantium, iure atque doloribus quaerat. Obcaecati tempore molestiae aliquid amet maiores suscipit, beatae repellat illum ipsam tenetur. Porro officiis omnis quam, iure quia necessitatibus consectetur culpa itaque, in tempora rem ex ad et iusto, hic commodi fuga quibusdam. Dolores exercitationem natus dolor pariatur voluptates non corporis, minus repellat! Quis distinctio esse, animi suscipit ducimus sequi obcaecati facere, perferendis ea omnis soluta.
-            </p>
-            <p className={s.paragraph}>
-                Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, natus?
-            </p> */}
+            This is Header
+            <h1 className={s.heading}>This is heading</h1>
+            <div className={s.logo}>This is logo text</div>
         </div>
     )
 }

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

@@ -0,0 +1,10 @@
+@import '../../../styles/utilities';
+
+.heartToggle{
+    cursor: pointer;
+    width: 4.8rem;
+    height: 4.8rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}

src/components/common/ItemWishList/ItemWishList.tsx

@@ -0,0 +1,19 @@
+import { Heart } from '@components/icons'
+import React, { useState } from 'react'
+import s from './ItemWishList.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const ItemWishList = ({}:Props) => {
+    const [isClick,setClick] = useState(false)
+    return(
+        <div className={s.heartToggle} onClick={() => setClick(!isClick)}>
+            <Heart color={isClick ? "#D1644D" : "#5B9A74"}/>
+        </div>
+    )
+}
+
+export default ItemWishList

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

@@ -0,0 +1,20 @@
+@import '../../../styles/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');
+
+
+.logo{
+    display: flex;
+    .eclipse{
+        width: 3.2rem;
+        height: 3.2rem;
+        background-color: theme("colors.primary");
+        border-radius: 50%;
+        margin-right: 1.2rem;
+    }
+    .conTent{
+        font-family: 'Poppins', sans-serif;
+        text-transform: uppercase;
+        line-height: 3.2rem;
+        letter-spacing: -0.02rem;
+    }
+}

src/components/common/Logo/Logo.tsx

@@ -0,0 +1,21 @@
+import s from './Logo.module.scss'
+
+interface Props {
+    className?: string
+    children?: any
+}
+
+const Logo = ({}: Props) => {
+    return(
+        <div className={s.logo}>
+            <div className={s.eclipse}>
+
+            </div>
+            <div className={s.conTent}>
+                ONLINE GROCERY
+            </div>
+        </div>
+    )
+}
+
+export default Logo

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

@@ -0,0 +1,17 @@
+@import '../../../styles/utilities';
+@import url('https://fonts.googleapis.com/css2?family=Nunito&display=swap');
+
+.viewAll{
+    display: flex;
+    color: theme("colors.primary");
+    .conTent{
+        margin: 0.8rem 0.8rem 0.8rem 1.6rem;
+        font-family: 'Nunito', sans-serif;
+        font-weight: bold;
+    }
+    .vecTor{
+        margin: 0.8rem 0rem 0.8rem 0rem;
+    }
+}
+
+

src/components/common/ViewAllItem/ViewAllItem.tsx

@@ -0,0 +1,26 @@
+import Vector from 'src/components/icons/Vector'
+import s from './ViewAllItem.module.scss'
+import Link from 'next/link'
+
+interface Props {
+    className?: string
+    children?: any
+    link?: string
+}
+
+const ViewAllItem = ({ link }: Props) => {
+    return(
+        <div className={s.viewAll}>
+            <Link href={"/all"}>
+                <a className={s.conTent}>
+                    View All
+                </a>
+            </Link>
+            <div className={s.vecTor}>
+                <Vector />
+            </div>
+        </div>
+    )
+}
+
+export default ViewAllItem

src/components/common/index.ts

@@ -4,4 +4,6 @@ export { default as CarouselCommon } from './CarouselCommon/CarouselCommon'
 export { default as QuanittyInput } from './QuanittyInput/QuanittyInput'
 export { default as LabelCommon } from './LabelCommon/LabelCommon'
 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'

src/components/icons/Heart.tsx

@@ -0,0 +1,20 @@
+
+const Vector = ({ ...props }) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+            d="M20.16 4.99992C19.1 3.93713 17.6948 3.28846 16.1984 3.17109C14.7019 3.05372 13.2128 3.47539 12 4.35992C10.7277 3.41356 9.14402 2.98443 7.56795 3.15896C5.99188 3.33348 4.54047 4.0987 3.506 5.30051C2.47154 6.50231 1.93085 8.05144 1.99283 9.63594C2.05481 11.2204 2.71485 12.7226 3.84003 13.8399L10.05 20.0599C10.57 20.5717 11.2704 20.8585 12 20.8585C12.7296 20.8585 13.43 20.5717 13.95 20.0599L20.16 13.8399C21.3276 12.6652 21.983 11.0762 21.983 9.41992C21.983 7.76365 21.3276 6.17465 20.16 4.99992ZM18.75 12.4599L12.54 18.6699C12.4694 18.7413 12.3853 18.7979 12.2926 18.8366C12.1999 18.8752 12.1005 18.8951 12 18.8951C11.8996 18.8951 11.8002 18.8752 11.7075 18.8366C11.6148 18.7979 11.5307 18.7413 11.46 18.6699L5.25003 12.4299C4.46579 11.6283 4.02664 10.5514 4.02664 9.42992C4.02664 8.30846 4.46579 7.23158 5.25003 6.42992C6.04919 5.64091 7.127 5.19849 8.25003 5.19849C9.37306 5.19849 10.4509 5.64091 11.25 6.42992C11.343 6.52365 11.4536 6.59804 11.5755 6.64881C11.6973 6.69958 11.828 6.72572 11.96 6.72572C12.092 6.72572 12.2227 6.69958 12.3446 6.64881C12.4665 6.59804 12.5771 6.52365 12.67 6.42992C13.4692 5.64091 14.547 5.19849 15.67 5.19849C16.7931 5.19849 17.8709 5.64091 18.67 6.42992C19.4651 7.22107 19.9186 8.29211 19.9336 9.41361C19.9485 10.5351 19.5237 11.6179 18.75 12.4299V12.4599Z"
+            fill={props.color}
+        />
+      </svg>
+    )
+  }
+  
+  export default Vector

src/components/icons/IconBuy.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const IconBuy = () => {
+    return (
+        <svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M19 14H5C4.73478 14 4.48043 13.8946 4.29289 13.7071C4.10536 13.5196 4 13.2652 4 13C4 12.7348 4.10536 12.4804 4.29289 12.2929C4.48043 12.1054 4.73478 12 5 12H15.44C16.1087 12 16.7582 11.7767 17.2854 11.3654C17.8126 10.9542 18.1873 10.3786 18.35 9.73L20 3.24C20.0375 3.09241 20.0407 2.93821 20.0095 2.78917C19.9783 2.64013 19.9135 2.50018 19.82 2.38C19.7227 2.25673 19.5978 2.1581 19.4554 2.09208C19.3129 2.02606 19.1569 1.99452 19 2H4.76C4.55369 1.41645 4.17193 0.910998 3.66707 0.552938C3.1622 0.194879 2.55894 0.00173951 1.94 0H1C0.734784 0 0.48043 0.105357 0.292893 0.292893C0.105357 0.48043 0 0.734784 0 1C0 1.26522 0.105357 1.51957 0.292893 1.70711C0.48043 1.89464 0.734784 2 1 2H1.94C2.16843 1.99334 2.39226 2.06513 2.57421 2.20341C2.75615 2.34169 2.88525 2.53812 2.94 2.76L3 3.24L4.73 10C3.93435 10.0358 3.18551 10.3862 2.64822 10.9741C2.11093 11.5621 1.8292 12.3394 1.865 13.135C1.9008 13.9306 2.25121 14.6795 2.83914 15.2168C3.42707 15.7541 4.20435 16.0358 5 16H5.18C5.01554 16.4531 4.96269 16.9392 5.02593 17.4171C5.08917 17.895 5.26665 18.3506 5.54332 18.7454C5.81999 19.1401 6.18772 19.4624 6.61535 19.6849C7.04299 19.9074 7.51795 20.0235 8 20.0235C8.48205 20.0235 8.95701 19.9074 9.38465 19.6849C9.81228 19.4624 10.18 19.1401 10.4567 18.7454C10.7334 18.3506 10.9108 17.895 10.9741 17.4171C11.0373 16.9392 10.9845 16.4531 10.82 16H13.18C13.0155 16.4531 12.9627 16.9392 13.0259 17.4171C13.0892 17.895 13.2666 18.3506 13.5433 18.7454C13.82 19.1401 14.1877 19.4624 14.6154 19.6849C15.043 19.9074 15.5179 20.0235 16 20.0235C16.4821 20.0235 16.957 19.9074 17.3846 19.6849C17.8123 19.4624 18.18 19.1401 18.4567 18.7454C18.7334 18.3506 18.9108 17.895 18.9741 17.4171C19.0373 16.9392 18.9845 16.4531 18.82 16H19C19.2652 16 19.5196 15.8946 19.7071 15.7071C19.8946 15.5196 20 15.2652 20 15C20 14.7348 19.8946 14.4804 19.7071 14.2929C19.5196 14.1054 19.2652 14 19 14ZM17.72 4L16.41 9.24C16.3552 9.46188 16.2262 9.65831 16.0442 9.79659C15.8623 9.93487 15.6384 10.0067 15.41 10H6.78L5.28 4H17.72ZM8 18C7.80222 18 7.60888 17.9414 7.44443 17.8315C7.27998 17.7216 7.15181 17.5654 7.07612 17.3827C7.00043 17.2 6.98063 16.9989 7.01921 16.8049C7.0578 16.6109 7.15304 16.4327 7.29289 16.2929C7.43275 16.153 7.61093 16.0578 7.80491 16.0192C7.99889 15.9806 8.19996 16.0004 8.38268 16.0761C8.56541 16.1518 8.72159 16.28 8.83147 16.4444C8.94135 16.6089 9 16.8022 9 17C9 17.2652 8.89464 17.5196 8.70711 17.7071C8.51957 17.8946 8.26522 18 8 18ZM16 18C15.8022 18 15.6089 17.9414 15.4444 17.8315C15.28 17.7216 15.1518 17.5654 15.0761 17.3827C15.0004 17.2 14.9806 16.9989 15.0192 16.8049C15.0578 16.6109 15.153 16.4327 15.2929 16.2929C15.4327 16.153 15.6109 16.0578 15.8049 16.0192C15.9989 15.9806 16.2 16.0004 16.3827 16.0761C16.5654 16.1518 16.7216 16.28 16.8315 16.4444C16.9414 16.6089 17 16.8022 17 17C17 17.2652 16.8946 17.5196 16.7071 17.7071C16.5196 17.8946 16.2652 18 16 18Z" fill="#141414" />
+        </svg>
+    )
+}
+
+export default IconBuy

src/components/icons/Vector.tsx

@@ -0,0 +1,20 @@
+
+const Vector = ({ ...props }) => {
+    return (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        {...props}
+      >
+        <path
+            d="M14.8299 11.2899L10.5899 7.04995C10.497 6.95622 10.3864 6.88183 10.2645 6.83106C10.1427 6.78029 10.012 6.75415 9.87994 6.75415C9.74793 6.75415 9.61723 6.78029 9.49537 6.83106C9.37351 6.88183 9.26291 6.95622 9.16994 7.04995C8.98369 7.23731 8.87915 7.49076 8.87915 7.75495C8.87915 8.01913 8.98369 8.27259 9.16994 8.45995L12.7099 11.9999L9.16994 15.5399C8.98369 15.7273 8.87915 15.9808 8.87915 16.2449C8.87915 16.5091 8.98369 16.7626 9.16994 16.9499C9.26338 17.0426 9.3742 17.116 9.49604 17.1657C9.61787 17.2155 9.74834 17.2407 9.87994 17.2399C10.0115 17.2407 10.142 17.2155 10.2638 17.1657C10.3857 17.116 10.4965 17.0426 10.5899 16.9499L14.8299 12.7099C14.9237 12.617 14.9981 12.5064 15.0488 12.3845C15.0996 12.2627 15.1257 12.132 15.1257 11.9999C15.1257 11.8679 15.0996 11.7372 15.0488 11.6154C14.9981 11.4935 14.9237 11.3829 14.8299 11.2899Z"
+            fill="#5B9A74"
+        />
+      </svg>
+    )
+  }
+  
+  export default Vector

src/components/icons/index.ts

@@ -1 +1 @@
-// index here
+export { default as IconBuy } from './IconBuy'

src/styles/_base.scss

@@ -1,5 +1,7 @@
+@import url("https://fonts.googleapis.com/css2?family=Nunito&family=Poppins:wght@500&family=Righteous&display=swap");
+
 :root {
-  --primary: #36bf6d;
+  --primary: #5b9a74;
   --primary-light: #e0f6e8;
   --primary-lightest: #effaf4;
 
@@ -28,6 +30,7 @@
   --text-label: #8f8f8f;
   --text-placeholder: #cccccc;
 
+  --disabled: #cccccc;
   --border-line: #ebebeb;
   --background: #f8f8f8;
   --white: #fbfbfb;
@@ -35,7 +38,13 @@
   --font-size: 1.6rem;
   --line-height: 2.4rem;
 
-  --font-sans: -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  // --font-size: 16px;
+  // --line-height: 24px;
+
+  --font-sans: "Nunito", cursive, -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica",
+    sans-serif;
+  --font-heading: "Righteous", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
+  --font-logo: "Poppins", -apple-system, system-ui, BlinkMacSystemFont, "Helvetica Neue", "Helvetica", sans-serif;
 }
 
 *,
@@ -62,8 +71,11 @@ body {
 
 html {
   /* default font-size: 16px -> 62.5% * 16px = 10px */
-  /* => 1rem = 10px*/
-  font-size: 62.5% !important;
+  font-size: 50% !important; // => 1rem = 8px
+
+  @screen md {
+    font-size: 62.5% !important; // => 1rem = 10px*/
+  }
   scroll-behavior: smooth;
   touch-action: manipulation;
   font-feature-settings: "case" 1, "rlig" 1, "calt" 0;

src/styles/_utilities.scss

@@ -89,6 +89,14 @@
         }
     }
     .custom-border-radius {
-        border-radius: 50% 20% / 10% 40%;
+        border-radius: 60% 10% 60% 2%/ 10% 40% 10% 50%;
+    }
+
+    .font-heading {
+        font-family: var(--font-heading);
+    }
+
+    .font-logo {
+        font-family: var(--font-logo);
     }
 }

src/utils/constanst.utils.ts

@@ -1 +1,12 @@
-// constanst here
+
+
+export enum ButonType {
+    primary = 'primary',
+    light = 'light',
+}
+
+export enum ButtonSize {
+    default = 'default',
+    large = 'large',
+}
+

tailwind.config.js

@@ -51,6 +51,8 @@ module.exports = {
 
         'background-arrow':'var(--background-arrow)',
 
+        'disabled': 'var(--text-disabled)',
+        
         // @deprecated (NOT use these variables)
         'primary-2': 'var(--primary-2)',
         secondary: 'var(--secondary)',
@@ -94,7 +96,7 @@ module.exports = {
           'rgba(0, 0, 0, 0.02) 0px 30px 30px, rgba(0, 0, 0, 0.03) 0px 0px 8px, rgba(0, 0, 0, 0.05) 0px 1px 0px',
       },
       fontSize: {
-        base: ['1.6rem', '2.4rem'],
+        base: ['16px', '24px'],
       },
       borderRadius: {
         rounded: '.8rem',