mirror of
https://github.com/vercel/commerce.git
synced 2025-07-21 11:51:20 +00:00
enhance: UI header
This commit is contained in:
lytrankieio123
parent
974cb55cca
commit
db4314090c
@ -1,4 +1,5 @@
|
||||
import { Layout } from '@components/common'
|
||||
import { Layout } from "src/components/common"
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div>
|
||||
|
||||
@ -1,24 +1,10 @@
|
||||
|
||||
import { Layout } from 'src/components/common';
|
||||
import { HomeBanner, HomeCategories, HomeCollection, HomeCTA, HomeFeature, HomeRecipe, HomeSubscribe, HomeVideo } from 'src/components/modules/home';
|
||||
import {SelectCommon} from 'src/components/common'
|
||||
|
||||
const OPTION_SORT = [
|
||||
{
|
||||
name: "By Name"
|
||||
},
|
||||
{
|
||||
name: "Price (High to Low)"
|
||||
},
|
||||
{
|
||||
name: "On Sale"
|
||||
}
|
||||
]
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<>
|
||||
{/* <HomeBanner />
|
||||
<HomeBanner />
|
||||
<HomeFeature />
|
||||
<HomeCategories />
|
||||
@ -26,9 +12,7 @@ export default function Home() {
|
||||
<HomeVideo />
|
||||
<HomeCTA />
|
||||
<HomeRecipe />
|
||||
<HomeSubscribe /> */}
|
||||
<SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
|
||||
<SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon>
|
||||
<HomeSubscribe />
|
||||
|
||||
{/* // todo: uncomment */}
|
||||
{/* <ModalCreateUserInfo/> */}
|
||||
|
||||
@ -52,7 +52,10 @@
|
||||
}
|
||||
a {
|
||||
@appy no-underline;
|
||||
&.iconFovourite {
|
||||
&:hover {
|
||||
opacity: .8;
|
||||
}
|
||||
&.iconFavourite {
|
||||
svg path {
|
||||
fill: var(--negative);
|
||||
}
|
||||
|
||||
@ -59,7 +59,7 @@ const HeaderMenu = memo(({ isFull, openModalAuthen, openModalInfo }: Props) => {
|
||||
</li>
|
||||
<li>
|
||||
<Link href={`${ROUTE.ACCOUNT}?${QUERY_KEY.TAB}=${ACCOUNT_TAB.FAVOURITE}`}>
|
||||
<a className={s.iconFovourite}>
|
||||
<a className={s.iconFavourite}>
|
||||
<IconHeart />
|
||||
</a>
|
||||
</Link>
|
||||
|
||||
@ -15,7 +15,7 @@ interface Props {
|
||||
// note: demo code
|
||||
const Layout: FC<Props> = ({ children }) => {
|
||||
const { locale = 'en-US' } = useRouter()
|
||||
const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: true })
|
||||
const { visible: visibleCartDrawer, openModal, closeModal: closeCartDrawer } = useModalCommon({ initialValue: false })
|
||||
|
||||
const toggle = () => {
|
||||
if (visibleCartDrawer) {
|
||||
|
||||
@ -3,6 +3,9 @@
|
||||
.menuDropdown {
|
||||
@apply relative cursor-pointer;
|
||||
width: fit-content;
|
||||
.label {
|
||||
all: unset;
|
||||
}
|
||||
&:hover {
|
||||
.label {
|
||||
color: var(--primary);
|
||||
@ -65,6 +68,16 @@
|
||||
margin-top: 0.4rem;
|
||||
li {
|
||||
@apply block w-full transition-all duration-200 cursor-pointer text-active;
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: auto;
|
||||
-ms-hyphens: auto;
|
||||
-moz-hyphens: auto;
|
||||
hyphens: auto;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
max-width: 15rem;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
button {
|
||||
all: unset;
|
||||
color: currentColor;
|
||||
|
||||
@ -16,9 +16,9 @@ const MenuDropdown = ({ options, children, isHasArrow = true, align }: Props) =>
|
||||
[s.menuDropdown]: true,
|
||||
[s.arrow]: isHasArrow,
|
||||
})}>
|
||||
<span className={s.label}>
|
||||
<button className={s.label}>
|
||||
{children}
|
||||
</span>
|
||||
</button>
|
||||
<section className={classNames({
|
||||
[s.menu]: true,
|
||||
[s.left]: align === 'left',
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import React, { ChangeEvent, useEffect, useState } from 'react'
|
||||
import s from './QuanittyInput.module.scss'
|
||||
import classNames from 'classnames'
|
||||
import { Minus, Plus } from '@components/icons'
|
||||
import { IconMinus, IconPlus } from '../../icons'
|
||||
interface QuanittyInputProps
|
||||
extends Omit<
|
||||
React.InputHTMLAttributes<HTMLInputElement>,
|
||||
@ -64,7 +64,7 @@ const QuanittyInput = ({
|
||||
return (
|
||||
<div className={classNames(s.quanittyInputWarper, { [s[size]]: size })}>
|
||||
<div className={s.minusIcon} onClick={onMinusClick}>
|
||||
<Minus />
|
||||
<IconMinus />
|
||||
</div>
|
||||
<input
|
||||
{...props}
|
||||
@ -74,7 +74,7 @@ const QuanittyInput = ({
|
||||
className={s.quanittyInput}
|
||||
/>
|
||||
<div className={s.plusIcon} onClick={onPlusClick}>
|
||||
<Plus />
|
||||
<IconPlus />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
18
src/components/icons/IconMinus.tsx
Normal file
18
src/components/icons/IconMinus.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
const IconMinus = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="12"
|
||||
viewBox="0 0 12 12"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.6667 5.33317H6.66669V1.33317C6.66669 1.15636 6.59645 0.98679 6.47142 0.861766C6.3464 0.736742 6.17683 0.666504 6.00002 0.666504C5.82321 0.666504 5.65364 0.736742 5.52862 0.861766C5.40359 0.98679 5.33335 1.15636 5.33335 1.33317V5.33317H1.33335C1.15654 5.33317 0.986974 5.40341 0.861949 5.52843C0.736925 5.65346 0.666687 5.82303 0.666687 5.99984C0.666687 6.17665 0.736925 6.34622 0.861949 6.47124C0.986974 6.59627 1.15654 6.6665 1.33335 6.6665H5.33335V10.6665C5.33335 10.8433 5.40359 11.0129 5.52862 11.1379C5.65364 11.2629 5.82321 11.3332 6.00002 11.3332C6.17683 11.3332 6.3464 11.2629 6.47142 11.1379C6.59645 11.0129 6.66669 10.8433 6.66669 10.6665V6.6665H10.6667C10.8435 6.6665 11.0131 6.59627 11.1381 6.47124C11.2631 6.34622 11.3334 6.17665 11.3334 5.99984C11.3334 5.82303 11.2631 5.65346 11.1381 5.52843C11.0131 5.40341 10.8435 5.33317 10.6667 5.33317Z"
|
||||
fill="#141414"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconMinus
|
||||
18
src/components/icons/IconPlus.tsx
Normal file
18
src/components/icons/IconPlus.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
const IconPlus = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
width="12"
|
||||
height="2"
|
||||
viewBox="0 0 12 2"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M10.6667 0.333496H1.33335C1.15654 0.333496 0.986974 0.403734 0.861949 0.528758C0.736925 0.653783 0.666687 0.823352 0.666687 1.00016C0.666687 1.17697 0.736925 1.34654 0.861949 1.47157C0.986974 1.59659 1.15654 1.66683 1.33335 1.66683H10.6667C10.8435 1.66683 11.0131 1.59659 11.1381 1.47157C11.2631 1.34654 11.3334 1.17697 11.3334 1.00016C11.3334 0.823352 11.2631 0.653783 11.1381 0.528758C11.0131 0.403734 10.8435 0.333496 10.6667 0.333496Z"
|
||||
fill="#141414"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default IconPlus
|
||||
@ -25,3 +25,5 @@ export { default as IconPeople } from './IconPeople'
|
||||
export { default as IconLocation } from './IconLocation'
|
||||
export { default as IconClose } from './IconClose'
|
||||
export { default as IconDelete } from './IconDelete'
|
||||
export { default as IconPlus } from './IconPlus'
|
||||
export { default as IconMinus } from './IconMinus'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user