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

🎨 styles: add logo to header

Browse Source 
:%s
This commit is contained in:
lytrankieio123
2021-09-07 10:07:58 +07:00
parent 470a2383af
commit 75773f234d
4 changed files with 19 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,6 +5,7 @@ import InputSearch from 'src/components/common/InputSearch/InputSearch'
import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown' import MenuDropdown from 'src/components/common/MenuDropdown/MenuDropdown'
import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons' import { IconBuy, IconHeart, IconHistory, IconUser } from 'src/components/icons'
import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils' import { ACCOUNT_TAB, QUERY_KEY, ROUTE } from 'src/utils/constanst.utils'
import Logo from '../../../Logo/Logo'
import s from './HeaderMenu.module.scss' import s from './HeaderMenu.module.scss'
interface Props { interface Props {
@@ -39,7 +40,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
<section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}> <section className={classNames({ [s.headerMenu]: true, [s.full]: isFull })}>
<div className={s.left}> <div className={s.left}>
<div className={s.top}> <div className={s.top}>
<div>Online Grocery</div> <Logo/>
<button className={s.iconCart}> <button className={s.iconCart}>
<IconBuy /> <IconBuy />
</button> </button>

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

@@ -27,9 +27,9 @@ const Layout: FC<Props> = ({ children }) => {
return ( return (
<CommerceProvider locale={locale}> <CommerceProvider locale={locale}>
<div className={s.mainLayout}> <div className={s.mainLayout}>
<button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
<Header /> <Header />
<main >{children}</main> <main >{children}</main>
<button onClick={toggle}>toggle card: {visibleCartDrawer.toString()}</button>
<CartDrawer <CartDrawer
visible={visibleCartDrawer} visible={visibleCartDrawer}
onClose={closeCartDrawer} /> onClose={closeCartDrawer} />

8
src/components/common/Logo/Logo.module.scss
View File

@@ -1,7 +1,7 @@
@import '../../../styles/utilities'; @import "../../../styles/utilities";
.logo { .logo {
display: flex; @apply flex justify-center items-center;
.eclipse { .eclipse {
width: 3.2rem; width: 3.2rem;
height: 3.2rem; height: 3.2rem;
@@ -10,9 +10,9 @@
margin-right: 1.2rem; margin-right: 1.2rem;
} }
.content { .content {
@apply font-logo; @apply font-logo font-bold;
font-size: 16px; font-size: 16px;
line-height: 32px; line-height: 32px;
letter-spacing: -0.02em; letter-spacing: -0.02em;
} }
} }

20
src/components/common/Logo/Logo.tsx
View File

@@ -1,14 +1,18 @@
import s from './Logo.module.scss' import s from './Logo.module.scss'
import Link from 'next/link'
import { ROUTE } from 'src/utils/constanst.utils'
const Logo = () => { const Logo = () => {
return( return (
<div className={s.logo}> <Link href={ROUTE.HOME}>
<div className={s.eclipse}> <a className={s.logo}>
</div> <div className={s.eclipse}>
<div className={s.content}> </div>
ONLINE GROCERY <div className={s.content}>
</div> ONLINE GROCERY
</div> </div>
</a>
</Link>
) )
} }