diff --git a/pages/index.tsx b/pages/index.tsx index 2b0afc403..938809fb6 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,4 +1,5 @@ +import { useState } from 'react' import {CarouselCommon, Layout, QuanittyInput } from 'src/components/common' const dataTest = [{ text:1 @@ -18,9 +19,8 @@ export default function Home() { return ( <> - - - + + ) } diff --git a/src/components/common/QuanittyInput/QuanittyInput.module.scss b/src/components/common/QuanittyInput/QuanittyInput.module.scss index eccb9bab2..d8a0e5fc1 100644 --- a/src/components/common/QuanittyInput/QuanittyInput.module.scss +++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss @@ -1,13 +1,39 @@ -// .quanittyInput::-webkit-outer-spin-button, -// .quanittyInput::-webkit-inner-spin-button { -// -webkit-appearance: none; -// margin: 0; -// } -.quanittyInput{ - @apply bg-background; - color: theme("textColor.active"); - &::-webkit-inner-spin-button, &::-webkit-inner-spin-button{ - -webkit-appearance: none; - margin: 0; +@import '../../../styles/utilities'; +.quanittyInputWarper{ + border-color: theme("textColor.active"); + @apply border border-solid inline-flex justify-between items-center custom-border-radius; + .plusIcon, .minusIcon{ + &:hover{ + cursor: pointer; + } } + &.default{ + max-width: 18.4rem; + min-height: 4rem; + .plusIcon, .minusIcon{ + margin: 0.8rem; + width: 2.4rem; + height: 2.4rem; + } + } + &.small{ + max-width: 10rem; + min-height: 2.8rem; + .plusIcon, .minusIcon{ + margin: 0 0.6rem; + // width: 1rem; + // height: 1rem; + } + } + .quanittyInput{ + @apply bg-background outline-none w-1/2 text-center h-full font-bold; + font-size: 20px; + line-height: 28px; + color: theme("textColor.active"); + &::-webkit-inner-spin-button, &::-webkit-inner-spin-button{ + -webkit-appearance: none; + margin: 0; + } + } + } \ No newline at end of file diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx index db1656993..21629548d 100644 --- a/src/components/common/QuanittyInput/QuanittyInput.tsx +++ b/src/components/common/QuanittyInput/QuanittyInput.tsx @@ -1,16 +1,83 @@ -import React, { useState } from 'react' -import s from "./QuanittyInput.module.scss" -interface QuanittyInputProps { - +import React, { ChangeEvent, useEffect, useState } from 'react' +import s from './QuanittyInput.module.scss' +import classNames from 'classnames' +import { Minus, Plus } from '@components/icons' +interface QuanittyInputProps + extends Omit< + React.InputHTMLAttributes, + 'onChange' | 'min' | 'max' | 'step' + > { + type?: 'default' | 'small' + onChange?: (value: number) => void + initValue?: number + min?: number + max?: number + step?: number } -const QuanittyInput = (props: QuanittyInputProps) => { - const [value, setvalue] = useState(0) - return ( -
- setvalue(+e.target.value)} className={s.quanittyInput}/> -
- ) +const QuanittyInput = ({ + type = 'default', + onChange, + initValue = 0, + min, + max, + step = 1, + ...props +}: QuanittyInputProps) => { + const [value, setValue] = useState(0) + + useEffect(() => { + onChange && onChange(value) + }, [value]) + + useEffect(() => { + initValue && setValue(initValue) + }, [initValue]) + + const onPlusClick = () => { + if (max && value + step > max) { + setValue(max) + } else { + setValue(value + step) + } + } + + const onMinusClick = () => { + if (min && value - step < min) { + setValue(min) + } else { + setValue(value - step) + } + } + + const onValueChange = (e: ChangeEvent) => { + let value = Number(e.target.value) || 0 + if (min && value < min) { + setValue(min) + } else if (max && value > max) { + setValue(max) + } else { + setValue(value) + } + } + + return ( +
+
+ +
+ +
+ +
+
+ ) } export default QuanittyInput diff --git a/src/components/icons/Minus.tsx b/src/components/icons/Minus.tsx new file mode 100644 index 000000000..7c3b97d30 --- /dev/null +++ b/src/components/icons/Minus.tsx @@ -0,0 +1,18 @@ +const ArrowRight = ({ ...props }) => { + return ( + + + + ) +} + +export default ArrowRight diff --git a/src/components/icons/Plus.tsx b/src/components/icons/Plus.tsx new file mode 100644 index 000000000..c8b2fcca3 --- /dev/null +++ b/src/components/icons/Plus.tsx @@ -0,0 +1,18 @@ +const ArrowLeft = ({ ...props }) => { + return ( + + + + ) +} + +export default ArrowLeft diff --git a/tailwind.config.js b/tailwind.config.js index b8f18475a..afbeb8bad 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -117,7 +117,7 @@ module.exports = { }, caroucel:{ "arrow-height":"64px" - } + }, }, }, plugins: [require('postcss-import'), require('tailwindcss'), require('autoprefixer')]