From a37eabea90074016d3e838c9245d38e734e11b37 Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Wed, 25 Aug 2021 13:52:47 +0700 Subject: [PATCH] :art: styles: header submenu :%s --- .../common/Header/Header.module.scss | 20 +----- src/components/common/Header/Header.tsx | 6 +- .../HeaderHighLight.module.scss | 1 + .../HeaderHighLight/HeaderHighLight.tsx | 1 - .../HeaderMenu/HeaderMenu.module.scss | 3 +- .../components/HeaderMenu/HeaderMenu.tsx | 1 - .../HeaderNoti/HeaderNoti.module.scss | 3 + .../HeaderSubMenu/HeaderNoti/HeaderNoti.tsx | 16 +++++ .../HeaderSubMenu/HeaderSubMenu.module.scss | 19 ++++- .../HeaderSubMenu/HeaderSubMenu.tsx | 70 ++++++++++++++++++- .../MenuDropdown/MenuDropdown.module.scss | 6 +- .../common/MenuDropdown/MenuDropdown.tsx | 8 ++- .../NotiMessage/NotiMessage.module.scss | 8 +++ .../common/NotiMessage/NotiMessage.tsx | 16 +++++ src/components/common/index.ts | 1 + src/components/icons/IconInfo.tsx | 11 +++ src/components/icons/index.ts | 1 + src/utils/constanst.utils.ts | 15 +++- tailwind.config.js | 2 +- 19 files changed, 175 insertions(+), 33 deletions(-) create mode 100644 src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.module.scss create mode 100644 src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.tsx create mode 100644 src/components/common/NotiMessage/NotiMessage.module.scss create mode 100644 src/components/common/NotiMessage/NotiMessage.tsx create mode 100644 src/components/icons/IconInfo.tsx diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss index 0207f107f..6445db75b 100644 --- a/src/components/common/Header/Header.module.scss +++ b/src/components/common/Header/Header.module.scss @@ -1,22 +1,8 @@ @import "../../../styles/utilities"; .header { - .btn { - // @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 font-heading; - } - .paragraph { - @apply topline; - } - .logo { - @apply font-logo; + .menu { + padding-left: 3.2rem; + padding-right: 3.2rem; } } diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index baf6f84dc..ba8271f2a 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -13,8 +13,10 @@ const Header = memo(({ }: Props) => { return (
- - +
+ + +
) }) diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss index 782139f9c..5d2fb0b8b 100644 --- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss +++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss @@ -7,6 +7,7 @@ color: var(--white); .menu { @apply flex items-center list-none; + padding: .8rem 0; li { &:not(:last-child) { margin-right: 3.2rem; diff --git a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx index 687b906d1..80d8289a4 100644 --- a/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx +++ b/src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx @@ -19,7 +19,6 @@ const MENU = [ ] interface Props { - className?: string children?: any } diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss index bcb06b9f6..aa4f91615 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss @@ -2,7 +2,8 @@ .headerMenu { @apply flex justify-between items-center bg-white; - padding: 2.4rem 3.2rem; + padding-top: 2.4rem; + padding-bottom: 2.4rem; .left { @apply flex items-center; .inputSearch { diff --git a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx index c5b716347..6e4b30370 100644 --- a/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx +++ b/src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx @@ -19,7 +19,6 @@ const OPTION_MENU = [ ] interface Props { - className?: string children?: any } diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.module.scss b/src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.module.scss new file mode 100644 index 000000000..7e678a7ed --- /dev/null +++ b/src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.module.scss @@ -0,0 +1,3 @@ +.headerNoti { + @apply flex items-center; +} diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.tsx b/src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.tsx new file mode 100644 index 000000000..4e5b922c1 --- /dev/null +++ b/src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import NotiMessage from 'src/components/common/NotiMessage/NotiMessage'; +import { IconInfo } from 'src/components/icons'; +import s from './HeaderNoti.module.scss'; + +const HeaderNoti = () => { + return ( + +
+  You can buy fresh products after 11pm or 8am +
+ + ); +}; + +export default HeaderNoti; \ No newline at end of file diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss index f76908148..34d3d2a6c 100644 --- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss +++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss @@ -1,5 +1,20 @@ @import "../../../../../styles/utilities"; -.headerHighLight { - +.headerSubMenu { + @apply flex justify-between items-center; + padding-bottom: 0.8rem; + .menu { + @apply flex items-center list-none; + li { + &:not(:last-child) { + margin-right: 4rem; + } + a { + @appy no-underline; + } + &:hover { + @apply text-primary; + } + } + } } diff --git a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx index 5df3096df..74fb7d3db 100644 --- a/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx +++ b/src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx @@ -1,16 +1,80 @@ +import Link from 'next/link' import { memo } from 'react' +import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' +import { ProductFeature, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' +import HeaderNoti from './HeaderNoti/HeaderNoti' import s from './HeaderSubMenu.module.scss' +const MENU = [ + { + name: 'New Items', + link: `${ROUTE.PRODUCTS}?${QUERY_KEY.FEATURED}=${ProductFeature.NewItem}`, + }, + { + name: 'Sales', + link: `${ROUTE.PRODUCTS}?${QUERY_KEY.FEATURED}=${ProductFeature.Sales}`, + }, + { + name: 'Best Sellers', + link: `${ROUTE.PRODUCTS}?${QUERY_KEY.FEATURED}=${ProductFeature.BestSellers}`, + }, + { + name: 'About Us', + link: ROUTE.ABOUT, + }, + { + name: 'Blog', + link: ROUTE.BLOGS, + }, +] + +// note: hard code, remove later +const CATEGORY = [ + { + name: 'Veggie', + link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=veggie`, + }, + { + name: 'Seafood', + link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=seafood`, + }, + { + name: 'Frozen', + link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=frozen`, + }, + { + name: 'Coffee Bean', + link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=coffee-bean`, + }, + { + name: 'Sauce', + link: `${ROUTE.PRODUCTS}?${QUERY_KEY.BRAND}=sauce`, + }, +] interface Props { - className?: string children?: any } const HeaderSubMenu = memo(({ }: Props) => { return ( -
+
+
+ ) + } + + +
) }) diff --git a/src/components/common/MenuDropdown/MenuDropdown.module.scss b/src/components/common/MenuDropdown/MenuDropdown.module.scss index 6822ac9b0..f8a8a20cc 100644 --- a/src/components/common/MenuDropdown/MenuDropdown.module.scss +++ b/src/components/common/MenuDropdown/MenuDropdown.module.scss @@ -52,6 +52,10 @@ top: 2rem; height: max-content; min-width: 19.2rem; + z-index: 100; + &.left { + left: 0; + } &:hover { @apply block shadow-md; } @@ -60,7 +64,7 @@ border: 1px solid var(--text-active); margin-top: .4rem; li { - @apply block transition-all duration-200 cursor-pointer text-active; + @apply block w-full transition-all duration-200 cursor-pointer text-active; padding: 0.8rem 1.6rem; &:hover { @apply bg-primary-lightest; diff --git a/src/components/common/MenuDropdown/MenuDropdown.tsx b/src/components/common/MenuDropdown/MenuDropdown.tsx index 86b7a084c..c20ffcaed 100644 --- a/src/components/common/MenuDropdown/MenuDropdown.tsx +++ b/src/components/common/MenuDropdown/MenuDropdown.tsx @@ -7,9 +7,10 @@ interface Props { children?: React.ReactNode, options: { link: string, name: string }[], isHasArrow?: boolean, + align?: 'left' } -const MenuDropdown = ({ options, children, isHasArrow = true }: Props) => { +const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) => { return (
{ {children} -
+
    { options.map(item =>
  • diff --git a/src/components/common/NotiMessage/NotiMessage.module.scss b/src/components/common/NotiMessage/NotiMessage.module.scss new file mode 100644 index 000000000..a07ea0c0f --- /dev/null +++ b/src/components/common/NotiMessage/NotiMessage.module.scss @@ -0,0 +1,8 @@ +@import "../../../styles/utilities"; + +.notiMessage { + @apply caption bg-info-light; + color: var(--info-dark); + padding: 0.4rem 1.6rem; + border-radius: 3rem; +} diff --git a/src/components/common/NotiMessage/NotiMessage.tsx b/src/components/common/NotiMessage/NotiMessage.tsx new file mode 100644 index 000000000..20eabdfae --- /dev/null +++ b/src/components/common/NotiMessage/NotiMessage.tsx @@ -0,0 +1,16 @@ +import React from 'react' +import s from './NotiMessage.module.scss' + +interface Props { + children?: React.ReactNode +} + +const NotiMessage = ({ children }: Props) => { + return ( +
    + {children} +
    + ) +} + +export default NotiMessage \ No newline at end of file diff --git a/src/components/common/index.ts b/src/components/common/index.ts index d1df223ba..3c40733a3 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -10,3 +10,4 @@ export { default as ButtonIconBuy} from './ButtonIconBuy/ButtonIconBuy' 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' diff --git a/src/components/icons/IconInfo.tsx b/src/components/icons/IconInfo.tsx new file mode 100644 index 000000000..027ee236b --- /dev/null +++ b/src/components/icons/IconInfo.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconInfo = () => { + return ( + + + + ) +} + +export default IconInfo diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 80d6f1dd4..a13b68230 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -3,3 +3,4 @@ export { default as IconSearch } from './IconSearch' export { default as IconArrowRight } from './IconArrowRight' export { default as IconUser } from './IconUser' export { default as IconHistory } from './IconHistory' +export { default as IconInfo } from './IconInfo' diff --git a/src/utils/constanst.utils.ts b/src/utils/constanst.utils.ts index e168879b7..0d66ecda0 100644 --- a/src/utils/constanst.utils.ts +++ b/src/utils/constanst.utils.ts @@ -10,7 +10,7 @@ export const ROUTE = { PRODUCTS: '/products', ABOUT: '/about', ACCOUNT: '/account', - + BUSSINESS: '/bussiness', CONTACT: '/contact', FAQ: '/faq', @@ -27,7 +27,18 @@ export const ACCOUNT_TAB = { } export const QUERY_KEY = { - TAB: 'tab' + TAB: 'tab', + CATEGORY: 'category', + BRAND: 'brand', + FEATURED: 'feature' +} + +export enum ProductFeature { + BestSellers = 'Best Sellers', + Sales = 'Sales', + NewItem = 'New Item', + Viewed = 'Viewed', + } export const KEY = { diff --git a/tailwind.config.js b/tailwind.config.js index c22fbc0a6..d0916050a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -83,9 +83,9 @@ module.exports = { active: 'var(--text-active)', label: 'var(--text-label)', placeholder: 'var(--text-placeholder)', + primary: 'var(--primary)', // @deprecated (NOT use these variables) - primary: 'var(--text-primary)', secondary: 'var(--text-secondary)', }, boxShadow: {