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

Add random background color to product page

Browse Source
This commit is contained in:
Daniele Pancottini
2023-03-01 11:38:02 +01:00
parent 35ef0b0f8f
commit ab0f1a6e6d
5 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
site/components/product/ProductSliderControl/ProductSliderControl.tsx
View File

@@ -6,25 +6,44 @@ import { ArrowLeft, ArrowRight } from '@components/icons'
interface ProductSliderControl {
onPrev: MouseEventHandler<HTMLButtonElement>
onNext: MouseEventHandler<HTMLButtonElement>
lighterColor: string
darkerColor: string
}
const ProductSliderControl: FC<ProductSliderControl> = ({ onPrev, onNext }) => (
<div className={s.control}>
<button
className={cn(s.leftControl)}
onClick={onPrev}
aria-label="Previous Product Image"
>
<ArrowLeft />
</button>
<button
className={cn(s.rightControl)}
onClick={onNext}
aria-label="Next Product Image"
>
<ArrowRight />
</button>
</div>
const ProductSliderControl: FC<ProductSliderControl> = ({ onPrev, onNext, lighterColor, darkerColor }) => (
<>
<style jsx>
{`
#leftButtonSlider:hover,
#rightButtonSlider:hover {
background-color: ${lighterColor} !important;
}
#leftButtonSlider,
#rightButtonSlider {
background-color: ${darkerColor} !important;
}
`}
</style>
<div className={s.control}>
<button
className={cn(s.leftControl)}
id="leftButtonSlider"
onClick={onPrev}
aria-label="Previous Product Image"
>
<ArrowLeft />
</button>
<button
className={cn(s.rightControl)}
id="rightButtonSlider"
onClick={onNext}
aria-label="Next Product Image"
>
<ArrowRight />
</button>
</div>
</>
)
export default memo(ProductSliderControl)