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

styles: btn common with icon as prefix and suffix

Browse Source
This commit is contained in:
lytrankieio123 2021-08-24 11:29:57 +07:00
parent 1ab91ca34a
commit 81868c889e
3 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/index.tsx
View File

@ -10,8 +10,8 @@ export default function Home() {
<ButtonCommon type={ButonType.light} >{ButonType.light} - Button light</ButtonCommon>
<ButtonCommon type={ButonType.light} disabled>{ButonType.light} - Button light</ButtonCommon>
<ButtonCommon type={ButonType.light} loading = {true}>{ButonType.light} - Button light</ButtonCommon>
<ButtonCommon size={ButtonSize.large} loading={true}>{ButtonSize.large} - Button default large</ButtonCommon>
<ButtonCommon icon={<IconBuy/>} disabled>Button with icon disabled</ButtonCommon>
<ButtonCommon size={ButtonSize.large} icon={<IconBuy/>}>{ButtonSize.large} - Button default large</ButtonCommon>
<ButtonCommon icon={<IconBuy/>} disabled isIconSuffix={true}>Button with icon disabled</ButtonCommon>
<ButtonCommon icon={<IconBuy/>} type={ButonType.light}>Button with icon</ButtonCommon>
<p>Go to <code>pages/index.tsx</code> to get your hand dirty!</p>
<p>Go to <code>src/components</code> to make your awesome component!</p>

9
src/components/common/ButtonCommon/ButtonCommon.module.scss
View File

@ -58,8 +58,15 @@
}
}
&.preserve {
flex-direction: row-reverse;
.icon {
margin-right: 0.8rem;
margin: 0 0 0 1.6rem;
}
}
.icon {
margin: 0 1.6rem 0 0;
svg path {
fill: currentColor;
}

10
src/components/common/ButtonCommon/ButtonCommon.tsx
View File

@ -1,5 +1,5 @@
import classNames from 'classnames'
import React from 'react'
import React, { memo } from 'react'
import { ButonType, ButtonSize } from 'src/utils/constanst.utils'
import s from './ButtonCommon.module.scss'
@ -8,19 +8,21 @@ interface Props {
type?: ButonType,
size?: ButtonSize,
icon?: any,
isIconSuffix?: boolean,
loading?: boolean,
disabled?: boolean,
onClick?: () => void,
}
const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default,
icon, loading, disabled, children, onClick }: Props) => {
const ButtonCommon = memo(({ type = ButonType.primary, size = ButtonSize.default,
icon, loading, disabled, isIconSuffix, children, onClick }: Props) => {
return (
<button className={classNames({
[s.buttonCommon]: true,
[s[type]]: !!type,
[s[size]]: !!size,
[s.loading]: loading,
[s.preserve]: isIconSuffix,
})}
disabled={disabled}
onClick={onClick}
@ -31,6 +33,6 @@ const ButtonCommon = ({ type = ButonType.primary, size = ButtonSize.default,
<span className={s.label}>{children}</span>
</button>
)
}
})
export default ButtonCommon