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" } }, },