From 8a3aaf4d6a7a6a29bd128b00b6909afef570c404 Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 20 Aug 2021 18:10:13 +0700 Subject: [PATCH 1/5] init caroucel --- pages/index.tsx | 20 ++++++- .../CarouselCommon/CaroucelCommon.module.scss | 5 ++ .../common/CarouselCommon/CarouselCommon.tsx | 57 +++++++++++++++++++ .../CustomCarouselArrow.module.scss | 17 ++++++ .../CustomArrow/CustomCarouselArrow.tsx | 24 ++++++++ src/components/common/index.ts | 1 + src/components/icons/ArrowLeft.tsx | 18 ++++++ src/components/icons/ArrowRight.tsx | 18 ++++++ src/styles/_base.scss | 2 +- tailwind.config.js | 5 ++ 10 files changed, 165 insertions(+), 2 deletions(-) create mode 100644 src/components/common/CarouselCommon/CaroucelCommon.module.scss create mode 100644 src/components/common/CarouselCommon/CarouselCommon.tsx create mode 100644 src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss create mode 100644 src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx create mode 100644 src/components/icons/ArrowLeft.tsx create mode 100644 src/components/icons/ArrowRight.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 103b3567e..df3f96d00 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,22 @@ -import { ButtonCommon, Layout } from 'src/components/common' +import { ButtonCommon, CarouselCommon, Layout } from 'src/components/common' +const dataTest = [{ + text:1 +},{ + text:2 +},{ + text:3 +},{ + text:4 +},{ + text:5 +},{ + text:6 +}] +const test = (props:any)=>
{props.text}
export default function Home() { + + return ( <>
This is home page
@@ -8,6 +24,8 @@ export default function Home() {

Go to pages/index.tsx to get your hand dirty!

Go to src/components to make your awesome component!

Go to src/styles to find global styles!

+ + ) } diff --git a/src/components/common/CarouselCommon/CaroucelCommon.module.scss b/src/components/common/CarouselCommon/CaroucelCommon.module.scss new file mode 100644 index 000000000..b1cc3e01e --- /dev/null +++ b/src/components/common/CarouselCommon/CaroucelCommon.module.scss @@ -0,0 +1,5 @@ +.navigation_wrapper{ + @apply relative; + min-height: theme("caroucel.arrow-height") ; + +} \ No newline at end of file diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx new file mode 100644 index 000000000..f18746aed --- /dev/null +++ b/src/components/common/CarouselCommon/CarouselCommon.tsx @@ -0,0 +1,57 @@ +import { useKeenSlider } from 'keen-slider/react' +import React from 'react' +import 'keen-slider/keen-slider.min.css' +import { CustomCarouselArrow } from './CustomArrow/CustomCarouselArrow'; +import s from "./CaroucelCommon.module.scss" +interface CarouselCommonProps { + children?: React.ReactNode + data?: any[] + Component: React.ComponentType + isArrow?:Boolean + key:String +} + +const CarouselCommon = ({ data, Component,key }: CarouselCommonProps) => { + const [currentSlide, setCurrentSlide] = React.useState(0) + const [sliderRef, slider] = useKeenSlider({ + slidesPerView: 1, + initial: 0, + slideChanged(s) { + setCurrentSlide(s.details().relativeSlide) + }, + }) + const handleRightArrowClick = () => { + slider.next() + } + + const handleLeftArrowClick = () => { + slider.prev() + } + return ( +
+
+ {data?.map((props,index) => ( +
+ +
+ ))} +
+ {slider && ( + <> + + + + )} +
+ ) +} + +export default CarouselCommon diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss new file mode 100644 index 000000000..ec1bf0d88 --- /dev/null +++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss @@ -0,0 +1,17 @@ +.custom_arrow{ + width: 64px; + height: 64px; + &:focus{ + outline: none; + } + @apply absolute top-1/2 bg-background-arrow transform -translate-y-1/2 flex justify-center items-center transition duration-100; + &.left{ + @apply left-0; + } + &.right{ + @apply right-0; + } + &.isDisabled{ + @apply hidden ; + } +} diff --git a/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx new file mode 100644 index 000000000..779591671 --- /dev/null +++ b/src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx @@ -0,0 +1,24 @@ +import classNames from 'classnames' +import React from 'react' +import ArrowLeft from 'src/components/icons/ArrowLeft' +import ArrowRight from 'src/components/icons/ArrowRight' +import s from "./CustomCarouselArrow.module.scss" +interface CustomCarouselArrowProps + extends React.ButtonHTMLAttributes { + side: 'left' | 'right' + isDisabled:Boolean +} + +export const CustomCarouselArrow = ({ + side,isDisabled, + ...props +}: CustomCarouselArrowProps) => { + return ( + + ) +} diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 4911a0637..1a00afe81 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -1,3 +1,4 @@ export { default as ButtonCommon } from './ButtonCommon/ButtonCommon' export { default as Layout } from './Layout/Layout' +export { default as CarouselCommon } from './CarouselCommon/CarouselCommon' diff --git a/src/components/icons/ArrowLeft.tsx b/src/components/icons/ArrowLeft.tsx new file mode 100644 index 000000000..cc85d36dd --- /dev/null +++ b/src/components/icons/ArrowLeft.tsx @@ -0,0 +1,18 @@ +const ArrowLeft = ({ ...props }) => { + return ( + + + + ) +} + +export default ArrowLeft diff --git a/src/components/icons/ArrowRight.tsx b/src/components/icons/ArrowRight.tsx new file mode 100644 index 000000000..0b57e663a --- /dev/null +++ b/src/components/icons/ArrowRight.tsx @@ -0,0 +1,18 @@ +const ArrowRight = ({ ...props }) => { + return ( + + + + ) +} + +export default ArrowRight diff --git a/src/styles/_base.scss b/src/styles/_base.scss index 599c4d5aa..e88def52c 100644 --- a/src/styles/_base.scss +++ b/src/styles/_base.scss @@ -31,7 +31,7 @@ --border-line: #ebebeb; --background: #f8f8f8; --white: #fbfbfb; - + --background-arrow:rgba(20, 20, 20, 0.05); --font-size: 1.6rem; --line-height: 2.4rem; diff --git a/tailwind.config.js b/tailwind.config.js index 4b2e65c26..b8f18475a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -49,6 +49,8 @@ module.exports = { 'background': 'var(--background)', 'white': 'var(--white)', + 'background-arrow':'var(--background-arrow)', + // @deprecated (NOT use these variables) 'primary-2': 'var(--primary-2)', secondary: 'var(--secondary)', @@ -112,6 +114,9 @@ module.exports = { '2xl': '1536px', // => @media (min-width: 1536px) { ... } + }, + caroucel:{ + "arrow-height":"64px" } }, }, From f604fbc787e734b6bec501887dff39ddb6ced62b Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 23 Aug 2021 10:18:37 +0700 Subject: [PATCH 2/5] init quanitty input --- pages/index.tsx | 15 +++++---------- .../common/CarouselCommon/CarouselCommon.tsx | 6 +++--- src/components/common/Header/Header.tsx | 4 ++-- .../QuanittyInput/QuanittyInput.module.scss | 13 +++++++++++++ .../common/QuanittyInput/QuanittyInput.tsx | 16 ++++++++++++++++ src/components/common/index.ts | 1 + 6 files changed, 40 insertions(+), 15 deletions(-) create mode 100644 src/components/common/QuanittyInput/QuanittyInput.module.scss create mode 100644 src/components/common/QuanittyInput/QuanittyInput.tsx diff --git a/pages/index.tsx b/pages/index.tsx index df3f96d00..2b0afc403 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ -import { ButtonCommon, CarouselCommon, Layout } from 'src/components/common' +import {CarouselCommon, Layout, QuanittyInput } from 'src/components/common' const dataTest = [{ text:1 },{ @@ -15,17 +15,12 @@ const dataTest = [{ }] const test = (props:any)=>
{props.text}
export default function Home() { - - return ( <> -
This is home page
- -

Go to pages/index.tsx to get your hand dirty!

-

Go to src/components to make your awesome component!

-

Go to src/styles to find global styles!

- - + + + + ) } diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx index f18746aed..1c0d98335 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.tsx +++ b/src/components/common/CarouselCommon/CarouselCommon.tsx @@ -8,10 +8,10 @@ interface CarouselCommonProps { data?: any[] Component: React.ComponentType isArrow?:Boolean - key:String + itemKey:String } -const CarouselCommon = ({ data, Component,key }: CarouselCommonProps) => { +const CarouselCommon = ({ data, Component,itemKey }: CarouselCommonProps) => { const [currentSlide, setCurrentSlide] = React.useState(0) const [sliderRef, slider] = useKeenSlider({ slidesPerView: 1, @@ -31,7 +31,7 @@ const CarouselCommon = ({ data, Component,key }: CarouselCommonProps) => {
{data?.map((props,index) => ( -
+
))} diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx index 6314dd7e5..20a4350ef 100644 --- a/src/components/common/Header/Header.tsx +++ b/src/components/common/Header/Header.tsx @@ -9,7 +9,7 @@ interface Props { const Header: FC = ({ }: Props) => { return (
- This is Header + {/* This is Header @@ -30,7 +30,7 @@ const Header: FC = ({ }: Props) => {

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, natus? -

+

*/}
) } diff --git a/src/components/common/QuanittyInput/QuanittyInput.module.scss b/src/components/common/QuanittyInput/QuanittyInput.module.scss new file mode 100644 index 000000000..eccb9bab2 --- /dev/null +++ b/src/components/common/QuanittyInput/QuanittyInput.module.scss @@ -0,0 +1,13 @@ +// .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; + } +} \ No newline at end of file diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx new file mode 100644 index 000000000..db1656993 --- /dev/null +++ b/src/components/common/QuanittyInput/QuanittyInput.tsx @@ -0,0 +1,16 @@ +import React, { useState } from 'react' +import s from "./QuanittyInput.module.scss" +interface QuanittyInputProps { + +} + +const QuanittyInput = (props: QuanittyInputProps) => { + const [value, setvalue] = useState(0) + return ( +
+ setvalue(+e.target.value)} className={s.quanittyInput}/> +
+ ) +} + +export default QuanittyInput diff --git a/src/components/common/index.ts b/src/components/common/index.ts index a52628d73..5a5df21c9 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -1,5 +1,6 @@ export { default as ButtonCommon } from './ButtonCommon/ButtonCommon' export { default as Layout } from './Layout/Layout' export { default as CarouselCommon } from './CarouselCommon/CarouselCommon' +export { default as QuanittyInput } from './QuanittyInput/QuanittyInput' export { default as Head } from './Head/Head' From b5ad6dd167cb3a047f83a8beda8f963ddc68020d Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 23 Aug 2021 17:37:12 +0700 Subject: [PATCH 3/5] :sparkles: feat: QuanittyInput :%s --- pages/index.tsx | 6 +- .../QuanittyInput/QuanittyInput.module.scss | 48 +++++++--- .../common/QuanittyInput/QuanittyInput.tsx | 89 ++++++++++++++++--- src/components/icons/Minus.tsx | 18 ++++ src/components/icons/Plus.tsx | 18 ++++ tailwind.config.js | 2 +- 6 files changed, 155 insertions(+), 26 deletions(-) create mode 100644 src/components/icons/Minus.tsx create mode 100644 src/components/icons/Plus.tsx 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')] From 6fea2ecc355d53497541656e3295aebe61783f00 Mon Sep 17 00:00:00 2001 From: unknown Date: Mon, 23 Aug 2021 18:30:37 +0700 Subject: [PATCH 4/5] init: label common --- pages/index.tsx | 11 ++++-- .../LabelCommon/LabelCommon.module.scss | 38 +++++++++++++++++++ .../common/LabelCommon/LabelCommon.tsx | 30 +++++++++++++++ .../common/QuanittyInput/QuanittyInput.tsx | 8 ++-- src/components/common/index.ts | 1 + 5 files changed, 81 insertions(+), 7 deletions(-) create mode 100644 src/components/common/LabelCommon/LabelCommon.module.scss create mode 100644 src/components/common/LabelCommon/LabelCommon.tsx diff --git a/pages/index.tsx b/pages/index.tsx index 938809fb6..a73f90cb2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,6 @@ import { useState } from 'react' -import {CarouselCommon, Layout, QuanittyInput } from 'src/components/common' +import {CarouselCommon, LabelCommon, Layout, QuanittyInput } from 'src/components/common' const dataTest = [{ text:1 },{ @@ -19,8 +19,13 @@ export default function Home() { return ( <> - - + + + SEEFOOT + -15% + Waitting + delivering + delivered ) } diff --git a/src/components/common/LabelCommon/LabelCommon.module.scss b/src/components/common/LabelCommon/LabelCommon.module.scss new file mode 100644 index 000000000..94b683c20 --- /dev/null +++ b/src/components/common/LabelCommon/LabelCommon.module.scss @@ -0,0 +1,38 @@ +.labelCommonWarper{ + display: inline-flex; + font-weight: bold; + &.defaultSize{ + max-height: 2rem; + line-height: 2rem; + font-size: 1.2rem; + } + &.largeSize{ + max-height: 2.4rem; + line-height: 2.4rem; + font-size: 1.6rem; + } + &.defaultType{ + @apply bg-positive-dark; + } + &.discountType{ + @apply bg-negative; + } + &.waitingType{ + @apply bg-warning; + } + &.deliveringType{ + @apply bg-info; + } + &.deliveredType{ + @apply bg-positive; + } + &.defaultShape{ + border-radius: 0.4rem; + } + &.halfShape{ + border-radius: 0px 1.4rem 1.4rem 0px; + } + &.roundShape{ + border-radius: 1.4rem; + } +} \ No newline at end of file diff --git a/src/components/common/LabelCommon/LabelCommon.tsx b/src/components/common/LabelCommon/LabelCommon.tsx new file mode 100644 index 000000000..fcb9b7eae --- /dev/null +++ b/src/components/common/LabelCommon/LabelCommon.tsx @@ -0,0 +1,30 @@ +import classNames from 'classnames' +import React from 'react' +import s from './LabelCommon.module.scss' +interface LabelCommonProps extends React.HTMLAttributes { + size?: 'default' | 'large' + shape?: 'half' | 'round' | 'default' + type?: 'default' | 'discount' | 'waiting' | 'delivering' | 'delivered' + color?: string +} + +const LabelCommon = ({ + size = 'default', + type = 'default', + shape = "default", + children, +}: LabelCommonProps) => { + return ( +
+ {children} +
+ ) +} + +export default LabelCommon diff --git a/src/components/common/QuanittyInput/QuanittyInput.tsx b/src/components/common/QuanittyInput/QuanittyInput.tsx index 21629548d..a01f16fe7 100644 --- a/src/components/common/QuanittyInput/QuanittyInput.tsx +++ b/src/components/common/QuanittyInput/QuanittyInput.tsx @@ -5,9 +5,9 @@ import { Minus, Plus } from '@components/icons' interface QuanittyInputProps extends Omit< React.InputHTMLAttributes, - 'onChange' | 'min' | 'max' | 'step' + 'onChange' | 'min' | 'max' | 'step' | "type" | "size" > { - type?: 'default' | 'small' + size?: 'default' | 'small' onChange?: (value: number) => void initValue?: number min?: number @@ -16,7 +16,7 @@ interface QuanittyInputProps } const QuanittyInput = ({ - type = 'default', + size = 'default', onChange, initValue = 0, min, @@ -62,7 +62,7 @@ const QuanittyInput = ({ } return ( -
+
diff --git a/src/components/common/index.ts b/src/components/common/index.ts index 5a5df21c9..16401b049 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -2,5 +2,6 @@ export { default as ButtonCommon } from './ButtonCommon/ButtonCommon' export { default as Layout } from './Layout/Layout' export { default as CarouselCommon } from './CarouselCommon/CarouselCommon' export { default as QuanittyInput } from './QuanittyInput/QuanittyInput' +export { default as LabelCommon } from './LabelCommon/LabelCommon' export { default as Head } from './Head/Head' From aef26bb167308312f7035974dd27789e04b50a32 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 24 Aug 2021 11:16:48 +0700 Subject: [PATCH 5/5] :sparkles: feat: label :%s --- pages/index.tsx | 10 +++++----- .../common/CarouselCommon/CarouselCommon.tsx | 2 +- .../common/LabelCommon/LabelCommon.module.scss | 7 ++++++- 3 files changed, 12 insertions(+), 7 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index a73f90cb2..f5dd4d973 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -14,18 +14,18 @@ const dataTest = [{ },{ text:6 }] -const test = (props:any)=>
{props.text}
+const test = (props:{text:string})=>
{props.text}
export default function Home() { return ( <> - SEEFOOT - -15% + SEEFOOT + -15% Waitting - delivering - delivered + Delivering + Delivered ) } diff --git a/src/components/common/CarouselCommon/CarouselCommon.tsx b/src/components/common/CarouselCommon/CarouselCommon.tsx index 1c0d98335..074295533 100644 --- a/src/components/common/CarouselCommon/CarouselCommon.tsx +++ b/src/components/common/CarouselCommon/CarouselCommon.tsx @@ -6,7 +6,7 @@ import s from "./CaroucelCommon.module.scss" interface CarouselCommonProps { children?: React.ReactNode data?: any[] - Component: React.ComponentType + Component: React.ComponentType isArrow?:Boolean itemKey:String } diff --git a/src/components/common/LabelCommon/LabelCommon.module.scss b/src/components/common/LabelCommon/LabelCommon.module.scss index 94b683c20..20dcb1294 100644 --- a/src/components/common/LabelCommon/LabelCommon.module.scss +++ b/src/components/common/LabelCommon/LabelCommon.module.scss @@ -1,15 +1,20 @@ .labelCommonWarper{ display: inline-flex; + align-items: flex-start; font-weight: bold; + letter-spacing: 0.01em; + @apply text-white text-right; &.defaultSize{ - max-height: 2rem; + min-height: 2rem; line-height: 2rem; font-size: 1.2rem; + padding: 0 0.8rem; } &.largeSize{ max-height: 2.4rem; line-height: 2.4rem; font-size: 1.6rem; + padding: 0 1.8rem; } &.defaultType{ @apply bg-positive-dark;