crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-04 12:11: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
Show Stats 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'

11
src/components/icons/IconInfo.tsx Normal file
View File

@ -0,0 +1,11 @@
import React from 'react'
const IconInfo = () => {
return (
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M6.99968 6.3335C6.82287 6.3335 6.6533 6.40373 6.52827 6.52876C6.40325 6.65378 6.33301 6.82335 6.33301 7.00016V9.66683C6.33301 9.84364 6.40325 10.0132 6.52827 10.1382C6.6533 10.2633 6.82287 10.3335 6.99968 10.3335C7.17649 10.3335 7.34606 10.2633 7.47108 10.1382C7.59611 10.0132 7.66634 9.84364 7.66634 9.66683V7.00016C7.66634 6.82335 7.59611 6.65378 7.47108 6.52876C7.34606 6.40373 7.17649 6.3335 6.99968 6.3335ZM7.25301 3.72016C7.0907 3.65348 6.90865 3.65348 6.74634 3.72016C6.66451 3.75189 6.58975 3.79947 6.52634 3.86016C6.46746 3.92496 6.4201 3.99937 6.38634 4.08016C6.34902 4.15928 6.33076 4.24605 6.33301 4.3335C6.3325 4.42123 6.34932 4.50821 6.3825 4.58943C6.41567 4.67066 6.46456 4.74454 6.52634 4.80683C6.59114 4.86572 6.66555 4.91307 6.74634 4.94683C6.84734 4.98832 6.95699 5.00437 7.06564 4.99357C7.1743 4.98277 7.27863 4.94544 7.36949 4.88488C7.46034 4.82431 7.53492 4.74235 7.58668 4.64621C7.63845 4.55007 7.6658 4.44269 7.66634 4.3335C7.66389 4.15698 7.59483 3.98792 7.47301 3.86016C7.40961 3.79947 7.33485 3.75189 7.25301 3.72016ZM6.99968 0.333496C5.68114 0.333496 4.3922 0.724489 3.29588 1.45703C2.19955 2.18957 1.34506 3.23077 0.840481 4.44894C0.335896 5.66711 0.203874 7.00756 0.461109 8.30077C0.718344 9.59397 1.35328 10.7819 2.28563 11.7142C3.21798 12.6466 4.40587 13.2815 5.69908 13.5387C6.99228 13.796 8.33273 13.6639 9.5509 13.1594C10.7691 12.6548 11.8103 11.8003 12.5428 10.704C13.2753 9.60764 13.6663 8.31871 13.6663 7.00016C13.6663 6.12468 13.4939 5.25778 13.1589 4.44894C12.8238 3.6401 12.3328 2.90517 11.7137 2.28612C11.0947 1.66706 10.3597 1.176 9.5509 0.840966C8.74206 0.505935 7.87516 0.333496 6.99968 0.333496ZM6.99968 12.3335C5.94484 12.3335 4.9137 12.0207 4.03664 11.4347C3.15957 10.8486 2.47599 10.0157 2.07232 9.04114C1.66865 8.0666 1.56303 6.99425 1.76882 5.95968C1.97461 4.92512 2.48256 3.97481 3.22844 3.22893C3.97432 2.48305 4.92463 1.9751 5.9592 1.76931C6.99376 1.56352 8.06612 1.66914 9.04066 2.07281C10.0152 2.47647 10.8481 3.16006 11.4342 4.03712C12.0202 4.91418 12.333 5.94533 12.333 7.00016C12.333 8.41465 11.7711 9.77121 10.7709 10.7714C9.77072 11.7716 8.41417 12.3335 6.99968 12.3335Z" fill="#3468B7" />
</svg>
)
}
export default IconInfo

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

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

15
src/utils/constanst.utils.ts
View File

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

2
tailwind.config.js
View File

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