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

bug: add dot MenuFilter, add page AccountSignIn , fix spacing MenuFilter

Browse Source
This commit is contained in:
Quangnhankie 2021-09-14 10:41:00 +07:00
parent 6cad0d89ca
commit ee496c95b4
13 changed files with 121 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages/account.tsx
View File

@ -1,10 +1,13 @@
import React from 'react';
import { Layout } from 'src/components/common';
import { AccountPage } from 'src/components/modules/account';
import { AccountPage, AccountSignIn } from 'src/components/modules/account';
const Account = () => {
return (
<AccountPage/>
// <AccountPage/>
<>
<AccountSignIn/>
</>
);
};

BIN
public/assets/images/accountsignin.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

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

@ -11,10 +11,11 @@ import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
import HeaderSubMenuMobile from './components/HeaderSubMenuMobile/HeaderSubMenuMobile'
import s from './Header.module.scss'
interface props {
toggleFilter: () => void
toggleFilter: () => void,
visibleFilter:boolean
}
const Header = memo(({ toggleFilter }: props) => {
const Header = memo(({ toggleFilter,visibleFilter }: props) => {
const headeFullRef = useRef<HTMLDivElement>(null)
const [isFullHeader, setIsFullHeader] = useState<boolean>(true)
const { visible: visibleModalAuthen, closeModal: closeModalAuthen, openModal: openModalAuthen } = useModalCommon({ initialValue: false })
@ -55,6 +56,7 @@ const Header = memo(({ toggleFilter }: props) => {
<HeaderHighLight />
<div className={s.menu}>
<HeaderMenu
visibleFilter={visibleFilter}
toggleFilter={toggleFilter}
toggleCart={toggleCart}
isFull={isFullHeader}

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

@ -22,10 +22,25 @@
margin-left: 1.6rem;
}
.iconFilter{
@apply relative;
.dot{
@apply absolute;
top: -0.08rem;
right: -0.2rem;
background-color: var(--negative);
width: 1.2rem;
height: 1.2rem;
border-radius: 1.2rem;
@apply hidden;
&.isShow{
@apply block;
}
}
@screen md {
display: none;
}
}
}
.inputSearch {
margin-top: 2.4rem;

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

@ -1,6 +1,6 @@
import classNames from 'classnames'
import Link from 'next/link'
import { memo, useMemo } from 'react'
import { memo, useEffect, useMemo, useState } from 'react'
import InputSearch from 'src/components/common/InputSearch/InputSearch'
import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
import { IconBuy, IconFilter, IconHeart, IconHistory, IconUser } from 'src/components/icons'
@ -11,6 +11,7 @@ import { useRouter } from 'next/router'
interface Props {
children?: any,
isFull: boolean,
visibleFilter?:boolean,
openModalAuthen: () => void,
openModalInfo: () => void,
toggleFilter:() => void,
@ -19,8 +20,10 @@ interface Props {
const FILTER_PAGE = [ROUTE.HOME,ROUTE.PRODUCTS]
const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
const HeaderMenu = memo(({ visibleFilter,isFull, openModalAuthen, openModalInfo, toggleFilter, toggleCart }: Props) => {
const router = useRouter()
const optionMenu = useMemo(() => [
{
onClick: openModalAuthen,
@ -50,6 +53,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo, toggleFilter,
FILTER_PAGE.includes(router.pathname) && (
<button className={s.iconFilter} onClick={toggleFilter}>
<IconFilter/>
<div className={classNames({[s.dot]:true,[s.isShow]:visibleFilter})}></div>
</button>
)
}

2
src/components/common/Layout/Layout.tsx
View File

@ -29,7 +29,7 @@ const Layout: FC<Props> = ({ children }) => {
return (
<CommerceProvider locale={locale}>
<div className={s.mainLayout}>
<Header toggleFilter={toggleFilter}/>
<Header toggleFilter={toggleFilter} visibleFilter={visibleFilter}/>
<main >{children}</main>
<CustomShapeSvg/>

1
src/components/common/MenuNavigation/MenuNavigation.module.scss
View File

@ -1,5 +1,6 @@
@import "../../../styles/utilities";
.menuNavigationWrapper{
@apply hidden;
.menuNavigationHeading{
@screen md {
@apply sub-headline font-bold ;

14
src/components/common/MenuNavigationProductList/MenuNavigationProductList.module.scss
View File

@ -10,8 +10,6 @@
}
.menuNavigationProductListMobile{
@apply relative transition-all duration-100;
&.isShow{
&::after{
content: "";
@ -39,13 +37,14 @@
transform: translateY(0%)
}
.content{
@apply relative w-full h-full;
@apply absolute w-full h-full;
margin-top: 3rem;
padding-top: 8rem ;
padding-top: 10rem ;
padding-bottom: 10rem;
background-color: white;
overflow-y: auto;
height: 100vh;
height: 96%;
bottom: 0;
border-radius: 2.4rem 2.4rem 0 0;
.head{
@apply flex justify-between fixed;
@ -53,7 +52,7 @@
left:0;
margin-top: 3rem;
border-radius: 2.4rem 2.4rem 0 0;
padding: 3rem 2rem 1rem 2rem;
padding: 4rem 2rem 2rem 2rem;
width: 100%;
background-color: white;
z-index: 10000;
@ -68,7 +67,8 @@
left:0;
width: 100%;
background-color: white;
padding: 0 1rem 2rem 1rem;
padding: 0 1rem 3rem 1rem;
}
button{
margin-top: 2rem;

4
src/components/common/MenuNavigationProductList/MenuSort/MenuSort.module.scss
View File

@ -9,7 +9,7 @@
margin: 0.8rem 0;
}
.menuSortList{
margin-bottom: 2rem;
padding-bottom: 1rem;
box-sizing: border-box;
li{
@ -22,7 +22,7 @@
&.active {
@apply font-bold relative;
color:var(--text-active);
background-color: var(--primary-lightest);
background-color: var(--gray);
&::after{
@apply absolute;
content:"";

37
src/components/modules/account/AccountSignIn/AccountSignIn.module.scss Normal file
View File

@ -0,0 +1,37 @@
@import "../../../../styles/utilities";
.accountSignInWrapper{
@screen sm-only{
@apply w-full;
.imgError{
width: 30%;
margin: 0 auto;
}
.text{
@apply sub-headline;
color:var(--text-placeholder);
text-align: center;
margin-top: 3.6rem;
}
.btn{
@apply flex justify-center;
margin: 2.6rem auto;
button{
padding: 1.6rem 7rem;
}
}
.dontHaveAccount{
@apply flex justify-center font-bold;
div{
color:var(--text-active);
}
span{
color:var(--positive);
}
}
}
@screen md{
@apply hidden;
}
}

40
src/components/modules/account/AccountSignIn/AccountSignIn.tsx Normal file
View File

@ -0,0 +1,40 @@
import React from "react"
import { ButtonCommon, StaticImage } from "src/components/common";
import s from './AccountSignIn.module.scss';
import {LANGUAGE} from 'src/utils/language.utils';
import AccountSignInImg from '../../../../../public/assets/images/accountsignin.png'
import Link from 'next/link';
import { useRouter } from 'next/router';
interface AccountSignIn {
}
const AccountSignIn = ({ } : AccountSignIn) => {
const router = useRouter();
function openLogin(){
router.push({
pathname: '/account/query',
search: '?openLogin=true'
});
}
return (
<>
<div className={s.accountSignInWrapper}>
<div className={s.imgError}>
<StaticImage src={AccountSignInImg} />
</div>
<div className={s.text}>
Sign in to get more interesting <br/> features
</div>
<div className={s.btn}>
<ButtonCommon size="default" onClick={openLogin}>{LANGUAGE.BUTTON_LABEL.SIGNIN}</ButtonCommon>
</div>
<div className={s.dontHaveAccount}>
<div>Don't have an account? &nbsp;</div> <span><a><Link href="/"> Create Account</Link></a></span>
</div>
</div>
</>
)
}
export default AccountSignIn

3
src/components/modules/account/index.ts
View File

@ -1,3 +1,4 @@
export { default as AccountNavigation } from './AccountNavigation/AccountNavigation'
export { default as DeliveryItem } from './DeliveryItem/DeliveryItem'
export { default as AccountPage } from './AccountPage/AccountPage'
export { default as AccountPage } from './AccountPage/AccountPage'
export { default as AccountSignIn } from './AccountSignIn/AccountSignIn'

1
src/utils/language.utils.ts
View File

@ -5,6 +5,7 @@ export const LANGUAGE = {
CONFIRM:'Confirm',
ADD_TO_CARD: 'Add to Cart',
PREORDER: 'Pre-Order Now',
SIGNIN :'Sign In'
},
PLACE_HOLDER: {
SEARCH: 'Search',