mirror of
https://github.com/vercel/commerce.git
synced 2025-07-07 13:21:22 +00:00
feat: create component MenuFilter and MenuNavigation
This commit is contained in:
quangnhankie
parent
813a474a5e
commit
1954d8c266
27
package-lock.json
generated
27
package-lock.json
generated
@ -5239,6 +5239,11 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"load-script": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/load-script/-/load-script-1.0.0.tgz",
|
||||
"integrity": "sha1-BJGTngvuVkPuSUp+PaPSuscMbKQ="
|
||||
},
|
||||
"loader-utils": {
|
||||
"version": "1.2.3",
|
||||
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.2.3.tgz",
|
||||
@ -5547,6 +5552,11 @@
|
||||
"safe-buffer": "^5.1.2"
|
||||
}
|
||||
},
|
||||
"memoize-one": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz",
|
||||
"integrity": "sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q=="
|
||||
},
|
||||
"merge-stream": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
|
||||
@ -8588,6 +8598,11 @@
|
||||
"scheduler": "^0.20.2"
|
||||
}
|
||||
},
|
||||
"react-fast-compare": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
|
||||
"integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
|
||||
},
|
||||
"react-fast-marquee": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.2.1.tgz",
|
||||
@ -8603,6 +8618,18 @@
|
||||
"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-1.1.0.tgz",
|
||||
"integrity": "sha512-alTKsjEL0dKH/ru1Iyn7vliS2QRcBp9zZPGoWxUOvRGWPUYgjo+V01is7p04It6KhgrzhJGnIj9GgX8W4bZoCQ=="
|
||||
},
|
||||
"react-player": {
|
||||
"version": "2.9.0",
|
||||
"resolved": "https://registry.npmjs.org/react-player/-/react-player-2.9.0.tgz",
|
||||
"integrity": "sha512-jNUkTfMmUhwPPAktAdIqiBcVUKsFKrVGH6Ocutj6535CNfM91yrvWxHg6fvIX8Y/fjYUPoejddwh7qboNV9vGA==",
|
||||
"requires": {
|
||||
"deepmerge": "^4.0.0",
|
||||
"load-script": "^1.0.0",
|
||||
"memoize-one": "^5.1.1",
|
||||
"prop-types": "^15.7.2",
|
||||
"react-fast-compare": "^3.0.1"
|
||||
}
|
||||
},
|
||||
"react-refresh": {
|
||||
"version": "0.8.3",
|
||||
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz",
|
||||
|
||||
@ -1,15 +1,18 @@
|
||||
|
||||
import { Layout } from 'src/components/common';
|
||||
import { MenuNavigation,MenuFilter} from 'src/components/common';
|
||||
import { HomeBanner, HomeCategories, HomeCTA, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
<HomeBanner />
|
||||
{/* <HomeBanner />
|
||||
<HomeCategories/>
|
||||
<HomeVideo />
|
||||
<HomeCTA />
|
||||
<HomeSubscribe />
|
||||
<HomeSubscribe /> */}
|
||||
<MenuFilter heading="Categories"/>
|
||||
<MenuNavigation heading="Categories"/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
46
src/components/common/MenuFilter/MenuFilter.module.scss
Normal file
46
src/components/common/MenuFilter/MenuFilter.module.scss
Normal file
@ -0,0 +1,46 @@
|
||||
@import "../../../styles/utilities";
|
||||
.menuFilterWrapper{
|
||||
@apply spacing-horizontal ;
|
||||
@screen md {
|
||||
@apply hidden;
|
||||
}
|
||||
.menuFilterHeading{
|
||||
@apply sub-headline font-bold ;
|
||||
color: var(--text-active);
|
||||
font-feature-settings: 'salt' on;
|
||||
margin: 0.8rem 0;
|
||||
}
|
||||
.menuFilterList{
|
||||
@apply flex flex-wrap justify-start relative;
|
||||
margin-bottom: 3rem;
|
||||
box-sizing: border-box;
|
||||
li{
|
||||
margin: 1rem 0;
|
||||
padding:0;
|
||||
a{
|
||||
padding: 0.8rem 1.6rem;
|
||||
margin-right: 0.8rem;
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
color:var(--text-base);
|
||||
background-color: var(--gray);
|
||||
border-radius: 0.8rem;
|
||||
&:hover {
|
||||
color:white;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
&.active {
|
||||
color:white;
|
||||
background-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
&::after{
|
||||
@apply absolute;
|
||||
bottom: -20%;
|
||||
content: "";
|
||||
width: 100%;
|
||||
border-bottom: 1px solid #EBEBEB;
|
||||
}
|
||||
}
|
||||
}
|
||||
59
src/components/common/MenuFilter/MenuFilter.tsx
Normal file
59
src/components/common/MenuFilter/MenuFilter.tsx
Normal file
@ -0,0 +1,59 @@
|
||||
import classNames from 'classnames'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
|
||||
import s from './MenuFilter.module.scss'
|
||||
const CATEGORY = [
|
||||
{
|
||||
name: 'All',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
|
||||
},
|
||||
{
|
||||
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 {
|
||||
children?: any,
|
||||
heading:string,
|
||||
}
|
||||
|
||||
const MenuFilter = ({heading}:Props)=> {
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<section className={classNames(s.menuFilterWrapper)}>
|
||||
<h2 className={classNames(s.menuFilterHeading)}>{heading}</h2>
|
||||
<ul className={s.menuFilterList}>
|
||||
{
|
||||
CATEGORY.map(item => <li key={item.name}>
|
||||
<Link href={item.link}>
|
||||
<a className={classNames({ [s.active]: router.asPath === item.link})}>
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuFilter
|
||||
@ -0,0 +1,29 @@
|
||||
@import "../../../styles/utilities";
|
||||
.menuNavigationWrapper{
|
||||
.menuNavigationHeading{
|
||||
@screen md {
|
||||
@apply sub-headline font-bold ;
|
||||
color: var(--text-active);
|
||||
font-feature-settings: 'salt' on;
|
||||
margin: 1.6rem 0;
|
||||
}
|
||||
}
|
||||
.menuNavigationList{
|
||||
@screen md {
|
||||
li{
|
||||
margin: 0.8rem 0;
|
||||
a{
|
||||
font-size: var(--font-size);
|
||||
line-height: var(--line-height);
|
||||
color:var(--text-base);
|
||||
&:hover {
|
||||
@apply text-primary;
|
||||
}
|
||||
&.active {
|
||||
@apply text-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
60
src/components/common/MenuNavigation/MenuNavigation.tsx
Normal file
60
src/components/common/MenuNavigation/MenuNavigation.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
import classNames from 'classnames'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { OPTION_ALL, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
|
||||
import s from './MenuNavigation.module.scss'
|
||||
const CATEGORY = [
|
||||
{
|
||||
name: 'All',
|
||||
link: `${ROUTE.PRODUCTS}/?${QUERY_KEY.BRAND}=${OPTION_ALL}`,
|
||||
},
|
||||
{
|
||||
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 {
|
||||
children?: any,
|
||||
heading:string,
|
||||
}
|
||||
|
||||
const MenuNavigation = ({heading}:Props)=> {
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<section className={classNames(s.menuNavigationWrapper)}>
|
||||
<h2 className={classNames(s.menuNavigationHeading)}>{heading}({CATEGORY.length})</h2>
|
||||
<ul className={s.menuNavigationList}>
|
||||
{
|
||||
CATEGORY.map(item => <li key={item.name}
|
||||
>
|
||||
<Link href={item.link}>
|
||||
<a className={classNames({ [s.active]: router.asPath === item.link})}>
|
||||
{item.name}
|
||||
</a>
|
||||
</Link>
|
||||
</li>)
|
||||
}
|
||||
</ul>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MenuNavigation
|
||||
@ -23,3 +23,5 @@ 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'
|
||||
export { default as MenuNavigation} from './MenuNavigation/MenuNavigation'
|
||||
export { default as MenuFilter} from './MenuFilter/MenuFilter'
|
||||
@ -38,10 +38,10 @@ export enum ProductFeature {
|
||||
Sales = 'Sales',
|
||||
NewItem = 'New Item',
|
||||
Viewed = 'Viewed',
|
||||
|
||||
}
|
||||
|
||||
export const KEY = {
|
||||
ENTER: 'Enter',
|
||||
}
|
||||
|
||||
export const OPTION_ALL = 'all';
|
||||
Loading…
x
Reference in New Issue
Block a user