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

✨ feat: product caroucel

Browse Source 
:%s
This commit is contained in:
unknown
2021-08-25 13:41:45 +07:00
parent de5a77fd4e e83f3e0512
commit 7a5c5657fe
20 changed files with 320 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.module.scss
View File

@@ -1,17 +1,37 @@
.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 ;
// .customArrow{
// 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;
// &.leftArrow{
// @apply left-0;
// }
// &.rightArrow{
// @apply right-0;
// }
// &.isDisabled{
// @apply hidden ;
// }
// }
.navigationWrapper{
:global(.customArrow) {
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;
&.leftArrow{
@apply left-0;
}
&.rightArrow{
@apply right-0;
}
&.isDisabled{
@apply hidden ;
}
}
}

9
src/components/common/CarouselCommon/CustomArrow/CustomCarouselArrow.tsx
View File

@@ -2,11 +2,13 @@ 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"
import "./CustomCarouselArrow.module.scss"
// import s from "../CaroucelCommon.module.scss"
interface CustomCarouselArrowProps
extends React.ButtonHTMLAttributes<HTMLButtonElement> {
side: 'left' | 'right'
isDisabled:Boolean
isDisabled?:Boolean
}
export const CustomCarouselArrow = ({
@@ -16,7 +18,8 @@ export const CustomCarouselArrow = ({
return (
<button
{...props}
className={classNames(`${s.custom_arrow}`, { [`${s[side]}`]: side,[`${s.isDisabled}`]:isDisabled })}
// className={classNames(`${s.customArrow}`, { [`${s[`${side}Arrow`]}`]: side,[`${s.isDisabled}`]:isDisabled })}
className={classNames("customArrow", { [`${side}Arrow`]: side,"isDisabledArrow":isDisabled})}
>
{side==='left'?(<ArrowLeft/>):(<ArrowRight/>)}
</button>