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

✨ styles: button ghost

Browse Source
This commit is contained in:
lytrankieio123 2021-08-24 13:04:29 +07:00
parent ec7f3b5882
commit c05cca78ba
6 changed files with 24 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
pages/index.tsx
View File

@ -1,21 +1,7 @@
import { useEffect, useRef } from 'react'; import { ButtonCommon, Inputcommon, Layout } from 'src/components/common';
import { Inputcommon, Layout } from 'src/components/common' import { IconBuy } from 'src/components/icons';
import { InputType } from 'src/utils/constanst.utils'
export default function Home() { export default function Home() {
const inputElementRef = useRef<HTMLInputElement>(null);
useEffect(() => {
setTimeout(() =>{
inputElementRef.current?.focus()
}, 1000)
}, [])
const onEnter = (value: string | number) => {
}
return ( return (
<> <>
<div>This is home page</div> <div>This is home page</div>
@ -23,9 +9,11 @@ export default function Home() {
<p>Go to <code>src/components</code> to make your awesome component!</p> <p>Go to <code>src/components</code> to make your awesome component!</p>
<p>Go to <code>src/styles</code> to find global styles!</p> <p>Go to <code>src/styles</code> to find global styles!</p>
<Inputcommon placeholder="Enter here" onEnter={onEnter} ref={inputElementRef}/> <Inputcommon placeholder="Enter here" />
<Inputcommon placeholder="Enter here" onEnter={onEnter} type={InputType.number}/> <Inputcommon placeholder="Enter here" type='number' />
<Inputcommon placeholder="Enter here" value="23434" /> <Inputcommon placeholder="Enter here" value="23434" />
<ButtonCommon type='ghost' icon={<IconBuy/>}>Button</ButtonCommon>
</> </>
) )
} }

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

@ -48,6 +48,18 @@
} }
} }
} }
&.ghost {
@apply bg-white;
color: var(--primary);
border: 1px solid var(--primary);
&.loading {
&::before {
border-top-color: var(--primary);
}
}
}
&.large { &.large {
padding: 3.2rem 4.8rem; padding: 3.2rem 4.8rem;
&.loading { &.loading {

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

@ -5,8 +5,8 @@ import s from './ButtonCommon.module.scss'
interface Props { interface Props {
children?: React.ReactNode, children?: React.ReactNode,
type?: ButonType, type?: 'primary' | 'light' | 'ghost',
size?: ButtonSize, size?: 'default' | 'large',
icon?: any, icon?: any,
isIconSuffix?: boolean, isIconSuffix?: boolean,
loading?: boolean, loading?: boolean,
@ -14,7 +14,7 @@ interface Props {
onClick?: () => void, onClick?: () => void,
} }
const ButtonCommon = memo(({ type = ButonType.primary, size = ButtonSize.default, const ButtonCommon = memo(({ type = 'primary', size = 'default',
icon, loading, disabled, isIconSuffix, children, onClick }: Props) => { icon, loading, disabled, isIconSuffix, children, onClick }: Props) => {
return ( return (
<button className={classNames({ <button className={classNames({

2
src/components/common/InputCommon/InputCommon.module.scss
View File

@ -1,5 +1,5 @@
@import "../../../styles/utilities"; @import "../../../styles/utilities";
.inputCommon { .inputCommon {
@apply custom-border-radius bg-primary transition-all duration-200 text-white font-bold; @apply custom-border-radius bg-primary transition-all duration-200;
} }

4
src/components/common/InputCommon/InputCommon.tsx
View File

@ -1,5 +1,5 @@
import React, { forwardRef, useImperativeHandle, useRef } from 'react'; import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import { InputType, KEY } from 'src/utils/constanst.utils'; import { KEY } from 'src/utils/constanst.utils';
import s from './InputCommon.module.scss'; import s from './InputCommon.module.scss';
type Ref = { type Ref = {
@ -10,7 +10,7 @@ interface Props {
children?: React.ReactNode, children?: React.ReactNode,
value?: string | number, value?: string | number,
placeholder?: string, placeholder?: string,
type?: InputType, type?: 'text' | 'number',
onChange?: (value: string | number) => void, onChange?: (value: string | number) => void,
onEnter?: (value: string | number) => void, onEnter?: (value: string | number) => void,
} }

17
src/utils/constanst.utils.ts
View File

@ -1,20 +1,3 @@
export enum ButonType {
primary = 'primary',
light = 'light',
}
export enum ButtonSize {
default = 'default',
large = 'large',
}
export enum InputType {
text = 'text',
number = 'number',
}
export const KEY = { export const KEY = {
ENTER: 'Enter', ENTER: 'Enter',
} }