crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-29 05:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

🎨 styles: header submenu

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-08-25 13:52:47 +07:00
parent d2ce9bbf01
commit a37eabea90
19 changed files with 175 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/common/Header/Header.module.scss
View File

@@ -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;
}
}

6
src/components/common/Header/Header.tsx
View File

@@ -13,8 +13,10 @@ const Header = memo(({ }: Props) => {
return (
<header className={s.header}>
<HeaderHighLight />
<HeaderMenu />
<HeaderSubMenu />
<div className={s.menu}>
<HeaderMenu />
<HeaderSubMenu />
</div>
</header>
)
})

1
src/components/common/Header/components/HeaderHighLight/HeaderHighLight.module.scss
View File

@@ -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;

1
src/components/common/Header/components/HeaderHighLight/HeaderHighLight.tsx
View File

@@ -19,7 +19,6 @@ const MENU = [
]
interface Props {
className?: string
children?: any
}

3
src/components/common/Header/components/HeaderMenu/HeaderMenu.module.scss
View File

@@ -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 {

1
src/components/common/Header/components/HeaderMenu/HeaderMenu.tsx
View File

@@ -19,7 +19,6 @@ const OPTION_MENU = [
]
interface Props {
className?: string
children?: any
}

3
src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.module.scss Normal file
View File

@@ -0,0 +1,3 @@
.headerNoti {
@apply flex items-center;
}

16
src/components/common/Header/components/HeaderSubMenu/HeaderNoti/HeaderNoti.tsx Normal file
View File

@@ -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 (
<NotiMessage>
<div className={s.headerNoti}>
<IconInfo />&nbsp;<span>You can buy fresh products after <b>11pm</b> or <b>8am</b></span>
</div>
</NotiMessage>
);
};
export default HeaderNoti;

19
src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.module.scss
View File

@@ -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;
}
}
}
}

70
src/components/common/Header/components/HeaderSubMenu/HeaderSubMenu.tsx
View File

@@ -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 (
<section className={s.headerSubMenu}>
<section className={s.headerSubMenu}>
<ul className={s.menu}>
<li>
<MenuDropdown options={CATEGORY} align="left">Categories</MenuDropdown>
</li>
{
MENU.map(item => <li key={item.name}>
<Link href={item.link}>
<a >
{item.name}
</a>
</Link>
</section>
</li>)
}
</ul>
<HeaderNoti/>
</section>
)
})

6
src/components/common/MenuDropdown/MenuDropdown.module.scss
View File

@@ -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;

8
src/components/common/MenuDropdown/MenuDropdown.tsx
View File

@@ -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 (
<div className={classNames({
[s.menuDropdown]: true,
@@ -18,7 +19,10 @@ const MenuDropdown = ({ options, children, isHasArrow = true }: Props) => {
<span className={s.label}>
{children}
</span>
<section className={s.menu}>
<section className={classNames({
[s.menu]: true,
[s.left]: align === 'left',
})} >
<ul className={s.menuIner}>
{
options.map(item => <li key={item.name}>

8
src/components/common/NotiMessage/NotiMessage.module.scss Normal file
View File

@@ -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;
}

16
src/components/common/NotiMessage/NotiMessage.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react'
import s from './NotiMessage.module.scss'
interface Props {
children?: React.ReactNode
}
const NotiMessage = ({ children }: Props) => {
return (
<div className={s.notiMessage}>
{children}
</div>
)
}
export default NotiMessage

1
src/components/common/index.ts
View File

@@ -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'