From 71eaa424ec02edfcb38b12cd73215c8a86de32fb Mon Sep 17 00:00:00 2001 From: lytrankieio123 Date: Tue, 24 Aug 2021 13:45:30 +0700 Subject: [PATCH] styles: input common --- pages/index.tsx | 13 +++--- .../common/ButtonCommon/ButtonCommon.tsx | 3 +- .../InputCommon/InputCommon.module.scss | 42 ++++++++++++++++++- .../common/InputCommon/InputCommon.tsx | 28 ++++++++----- src/components/icons/IconSearch.tsx | 11 +++++ src/components/icons/index.ts | 2 + src/styles/_base.scss | 3 +- src/styles/_utilities.scss | 2 +- tailwind.config.js | 9 ++-- 9 files changed, 88 insertions(+), 25 deletions(-) create mode 100644 src/components/icons/IconSearch.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 85b4a208e..c20682748 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,6 @@ import { ButtonCommon, Inputcommon, Layout } from 'src/components/common'; -import { IconBuy } from 'src/components/icons'; +import { IconBuy, IconSearch } from 'src/components/icons'; export default function Home() { return ( <> @@ -9,11 +9,14 @@ export default function Home() {

Go to src/components to make your awesome component!

Go to src/styles to find global styles!

- - - - }>Button + {/* demo */} +
+ + }/> +
+ + }>Button ) } diff --git a/src/components/common/ButtonCommon/ButtonCommon.tsx b/src/components/common/ButtonCommon/ButtonCommon.tsx index 82961b43e..f3fc32ab0 100644 --- a/src/components/common/ButtonCommon/ButtonCommon.tsx +++ b/src/components/common/ButtonCommon/ButtonCommon.tsx @@ -1,13 +1,12 @@ import classNames from 'classnames' import React, { memo } from 'react' -import { ButonType, ButtonSize } from 'src/utils/constanst.utils' import s from './ButtonCommon.module.scss' interface Props { children?: React.ReactNode, type?: 'primary' | 'light' | 'ghost', size?: 'default' | 'large', - icon?: any, + icon?: React.ReactNode, isIconSuffix?: boolean, loading?: boolean, disabled?: boolean, diff --git a/src/components/common/InputCommon/InputCommon.module.scss b/src/components/common/InputCommon/InputCommon.module.scss index af7cde088..13e27fd5f 100644 --- a/src/components/common/InputCommon/InputCommon.module.scss +++ b/src/components/common/InputCommon/InputCommon.module.scss @@ -1,5 +1,43 @@ @import "../../../styles/utilities"; -.inputCommon { - @apply custom-border-radius transition-all duration-200; +.inputWrap { + @apply flex items-center relative; + .icon { + @apply absolute; + content: ""; + left: 1.6rem; + margin-right: 1.6rem; + svg path { + fill: currentColor; + } + } + .icon + .inputCommon { + padding-left: 4.8rem; + } + .inputCommon { + @apply block w-full transition-all duration-200 rounded; + padding: 1.6rem; + border: 1px solid var(--border-line); + &:hover, + &:focus, + &:active { + outline: none; + border: 1px solid var(--primary); + @apply shadow-md; + } + + &::placeholder { + @apply text-label; + } + + &.custom { + @apply custom-border-radius border-none; + background: var(--gray); + &:hover, + &:focus, + &:active { + border: 1px solid var(--primary); + } + } + } } diff --git a/src/components/common/InputCommon/InputCommon.tsx b/src/components/common/InputCommon/InputCommon.tsx index 0e6ef87a9..d26ed98bd 100644 --- a/src/components/common/InputCommon/InputCommon.tsx +++ b/src/components/common/InputCommon/InputCommon.tsx @@ -11,11 +11,14 @@ interface Props { value?: string | number, placeholder?: string, type?: 'text' | 'number', + styleType?: 'default' | 'custom', + icon?: React.ReactNode, onChange?: (value: string | number) => void, onEnter?: (value: string | number) => void, } -const InputCommon = forwardRef(({ value, placeholder, type, onChange, onEnter }: Props, ref) => { +const InputCommon = forwardRef(({ value, placeholder, type, styleType = 'default', icon, + onChange, onEnter }: Props, ref) => { const inputElementRef = useRef(null); useImperativeHandle(ref, () => ({ @@ -36,15 +39,20 @@ const InputCommon = forwardRef(({ value, placeholder, type, onChange } return ( - +
+ { + icon && {icon} + } + +
) }) diff --git a/src/components/icons/IconSearch.tsx b/src/components/icons/IconSearch.tsx new file mode 100644 index 000000000..4fc3633b2 --- /dev/null +++ b/src/components/icons/IconSearch.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const IconSearch = () => { + return ( + + + + ) +} + +export default IconSearch diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts index 155948269..c82e4fa76 100644 --- a/src/components/icons/index.ts +++ b/src/components/icons/index.ts @@ -1 +1,3 @@ export { default as IconBuy } from './IconBuy' +export { default as IconSearch } from './IconSearch' + diff --git a/src/styles/_base.scss b/src/styles/_base.scss index affd4207b..ec4273b21 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -32,7 +32,8 @@ --disabled: #cccccc; --border-line: #ebebeb; - --background: #f8f8f8; + --background: #fff; + --gray: #f8f8f8; --white: #fbfbfb; --font-size: 16px; diff --git a/src/styles/_utilities.scss b/src/styles/_utilities.scss index 53a0d952b..20093a1b2 100644 --- a/src/styles/_utilities.scss +++ b/src/styles/_utilities.scss @@ -89,7 +89,7 @@ } } .custom-border-radius { - border-radius: 60% 10% 60% 2%/ 10% 40% 10% 50%; + border-radius: 60% 10% 60% 2%/ 10% 20% 10% 50%; } .font-heading { diff --git a/tailwind.config.js b/tailwind.config.js index 393960c51..c22fbc0a6 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -45,10 +45,11 @@ module.exports = { 'negative-border-line': 'var(--negative-border-line)', 'negative-light': 'var(--negative-light)', - 'line': 'var(--border-line)', - 'background': 'var(--background)', - 'white': 'var(--white)', - 'disabled': 'var(--text-disabled)', + line: 'var(--border-line)', + background: 'var(--background)', + white: 'var(--white)', + gray: 'var(--gray)', + disabled: 'var(--text-disabled)', // @deprecated (NOT use these variables) 'primary-2': 'var(--primary-2)',