crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-05 20:51:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #10 from KieIO/m2-tan

Browse Source 
M2 tan
This commit is contained in:
datnguyenkieio 2021-08-30 15:54:44 +07:00 committed by GitHub
commit af85a7423e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 194 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
pages/index.tsx
View File

@ -1,10 +1,24 @@
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 />
@ -12,7 +26,9 @@ export default function Home() {
<HomeVideo />
<HomeCTA />
<HomeRecipe />
<HomeSubscribe />
<HomeSubscribe /> */}
<SelectCommon option={OPTION_SORT}>Sort By</SelectCommon>
<SelectCommon option={OPTION_SORT} size="large" type="custom">Sort By</SelectCommon>
// todo: uncomment
{/* <ModalCreateUserInfo/> */}

65
src/components/common/SelectCommon/SelectCommon.module.scss
View File

@ -1,32 +1,69 @@
@import "../../../styles/utilities";
.select{
@apply rounded-lg border-solid;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 1.2rem 1.6rem;
background-color: var(--white);
&.base{
width: 18.6rem;
height: 4.8rem;
width: 20.6rem;
.selectTrigger{
width: 20.6rem;
padding: 1.2rem 1.6rem;
}
}
&.large{
width: 34.25rem;
height: 5.6rem;
.selectTrigger{
width: 34.25rem;
padding: 1.6rem 1.6rem;
}
}
&.default{
@apply border;
.selectTrigger{
@apply border-solid border border-current;
}
}
&.custom{
.selectTrigger{
@apply border-2;
border-color: var(--border-line);
color: var(--text-label);
}
}
&.isActive{
.selectOptionWrapper{
@apply block;
}
}
}
.selectTrigger{
@apply outline-none flex justify-between;
color: var(--text-active);
border-radius: 0.8rem;
}
.selectOptionWrapper{
@apply outline-none hidden z-10 absolute;
border-radius: 0.8rem;
background-color: var(--white);
padding: 0.4rem 0rem 0.4rem 0rem;
margin-top: 0.6rem;
&.base{
width: 20.6rem;
}
&.large{
width: 34.25rem;
}
&.default{
@apply border-solid border border-current;
}
&.custom{
@apply border-2;
border-color: var(--border-line);
color: var(--text-label);
}
.option{
&:hover{
background-color: black;
}
&.active{
@apply hidden;
}
}

75
src/components/common/SelectCommon/SelectCommon.tsx
View File

@ -1,26 +1,75 @@
import s from './SelectCommon.module.scss'
import classNames from 'classnames'
import { useState, useRef, useEffect } from 'react'
import { IconVectorDown } from 'src/components/icons'
import SelectOption from './SelectOption/SelectOption'
interface Props {
placeHolder? : string,
children? : React.ReactNode,
size?: 'base' | 'large',
type?: 'default' | 'custom',
option: {name: string}[],
}
const SelectCommon = ({ type = 'default', size = 'base', option, placeHolder }: Props) => {
return(
<select className={classNames({
[s.select] : true,
[s[type]]: !!type,
[s[size]]: !!size,
})}
>
<option disabled selected hidden>{placeHolder}</option>
{
option.map(item => <option className={s.option} value={item.name}> {item.name} </option>)
const SelectCommon = ({ type = 'default', size = 'base', option, children }: Props) => {
const [isActive, setActive] = useState(false)
const [selectedName, setSelectedName] = useState(children)
const ref = useRef<HTMLDivElement>(null)
useEffect(() => {
const handleClick = (event: MouseEvent) => {
const { target } = event;
if (!ref?.current || ref?.current.contains(target as Node)) {
return
}
</select>
else{
setActive(false)
}
}
document.addEventListener('click', handleClick)
return () => {
document.removeEventListener('click', handleClick)
}
}, [ref])
const changeActiveStatus = () => {
setActive(!isActive)
}
const changeSelectedName = (item:string) => {
setSelectedName(item)
}
return(
<>
<div className={classNames({
[s.select] : true,
[s[size]] : !!size,
[s[type]] : !!type,
[s.isActive] : isActive,
})}
onClick = { changeActiveStatus }
ref = {ref}
>
<div className={classNames({
[s.selectTrigger] : true,
})}
>{selectedName}<IconVectorDown /></div>
<div className={classNames({
[s.selectOptionWrapper] : true,
[s[type]] : !!type,
[s[size]] : !!size,
})}
>
{
option.map(item =>
<SelectOption itemName={item.name} onClick={changeSelectedName} size={size} />
)
}
</div>
</div>
</>
)
}

17
src/components/common/SelectCommon/SelectOption/SelectOption.module.scss Normal file
View File

@ -0,0 +1,17 @@
@import "../../../../styles/utilities";
.selectOption {
@apply outline-none;
background-color: var(--white);
&.base{
width: 20.4rem;
padding: 0.8rem 1.6rem;
}
&.large{
width: 33.75rem;
padding: 0.8rem 1.6rem;
}
&:hover{
background-color: var(--gray);
}
}

25
src/components/common/SelectCommon/SelectOption/SelectOption.tsx Normal file
View File

@ -0,0 +1,25 @@
import s from './SelectOption.module.scss'
import classNames from 'classnames'
interface Props{
onClick: (value: string) => void,
itemName: string,
size: 'base' | 'large',
}
const SelectOption = ({onClick, itemName, size}: Props) => {
const changeName = () => {
onClick(itemName)
}
return(
<div className={classNames({
[s.selectOption] : true,
[s[size]] : !!size,
})}
onClick = {changeName}
>{itemName}</div>
)
}
export default SelectOption

21
src/components/icons/IconVectorDown.tsx Normal file
View File

@ -0,0 +1,21 @@
const IconVectorDown = ({ ...props }) => {
return (
<svg
width="24"
height="24"
viewBox="-6 -9 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
d="M10.9999 1.16994C10.8126 0.983692 10.5591 0.87915 10.2949 0.87915C10.0308 0.87915 9.77731 0.983692 9.58995 1.16994L5.99995 4.70994L2.45995 1.16994C2.27259 0.983692 2.01913 0.87915 1.75495 0.87915C1.49076 0.87915 1.23731 0.983692 1.04995 1.16994C0.95622 1.26291 0.881826 1.37351 0.831057 1.49537C0.780288 1.61723 0.75415 1.74793 0.75415 1.87994C0.75415 2.01195 0.780288 2.14266 0.831057 2.26452C0.881826 2.38638 0.95622 2.49698 1.04995 2.58994L5.28995 6.82994C5.38291 6.92367 5.49351 6.99806 5.61537 7.04883C5.73723 7.0996 5.86794 7.12574 5.99995 7.12574C6.13196 7.12574 6.26267 7.0996 6.38453 7.04883C6.50638 6.99806 6.61699 6.92367 6.70995 6.82994L10.9999 2.58994C11.0937 2.49698 11.1681 2.38638 11.2188 2.26452C11.2696 2.14266 11.2957 2.01195 11.2957 1.87994C11.2957 1.74793 11.2696 1.61723 11.2188 1.49537C11.1681 1.37351 11.0937 1.26291 10.9999 1.16994Z"
fill="#141414"
/>
</svg>
)
}
export default IconVectorDown

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

@ -9,6 +9,7 @@ export { default as IconHome } from './IconHome'
export { default as IconShopping } from './IconShopping'
export { default as IconHeart } from './IconHeart'
export { default as IconVector } from './IconVector'
export { default as IconVectorDown } from './IconVectorDown'
export { default as IconFacebookColor } from './IconFacebookColor'
export { default as IconGoogleColor } from './IconGoogleColor'
export { default as IconApple } from './IconApple'