forked from crowetic/commerce
Merge branch 'master' of github.com:okbel/e-comm-example into image-component
This commit is contained in:
commit
e43aee74dd
@ -1,19 +1,21 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply relative w-full h-full relative;
|
@apply relative w-full h-full;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leftControl,
|
.leftControl,
|
||||||
.rightControl {
|
.rightControl {
|
||||||
@apply text-white text-xl absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
|
@apply absolute top-1/2 -translate-x-1/2 z-20 w-16 h-16 flex items-center justify-center bg-hover-1 rounded-full focus:outline-none focus:shadow-outline-blue hover:bg-hover-2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.leftControl {
|
.leftControl {
|
||||||
@apply left-6;
|
@apply bg-cover left-10 md:left-6;
|
||||||
|
background-image: url('public/cursor-left.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.rightControl {
|
.rightControl {
|
||||||
@apply right-6;
|
@apply bg-cover right-10 md:right-6;
|
||||||
|
background-image: url('public/cursor-right.png');
|
||||||
}
|
}
|
||||||
|
|
||||||
.control {
|
.control {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { useKeenSlider } from 'keen-slider/react'
|
import { useKeenSlider } from 'keen-slider/react'
|
||||||
|
import Image from 'next/image'
|
||||||
import React, { Children, FC, isValidElement, useState } from 'react'
|
import React, { Children, FC, isValidElement, useState } from 'react'
|
||||||
import { HiChevronLeft, HiChevronRight } from 'react-icons/hi'
|
|
||||||
import cn from 'classnames'
|
import cn from 'classnames'
|
||||||
|
|
||||||
import s from './ProductSlider.module.css'
|
import s from './ProductSlider.module.css'
|
||||||
@ -20,12 +20,11 @@ const ProductSlider: FC = ({ children }) => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={s.root}>
|
<div className={s.root}>
|
||||||
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev}>
|
<button className={cn(s.leftControl, s.control)} onClick={slider?.prev} />
|
||||||
<HiChevronLeft />
|
<button
|
||||||
</button>
|
className={cn(s.rightControl, s.control)}
|
||||||
<button className={cn(s.rightControl, s.control)} onClick={slider?.next}>
|
onClick={slider?.next}
|
||||||
<HiChevronRight />
|
/>
|
||||||
</button>
|
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
ref={ref}
|
||||||
className="keen-slider h-full transition-opacity duration-150"
|
className="keen-slider h-full transition-opacity duration-150"
|
||||||
|
@ -72,7 +72,7 @@ const Sidebar: FC<Props> = ({ className, children, show = true, close }) => {
|
|||||||
leaveFrom="translate-x-0"
|
leaveFrom="translate-x-0"
|
||||||
leaveTo="translate-x-full"
|
leaveTo="translate-x-full"
|
||||||
>
|
>
|
||||||
<div className="h-full w-screen max-w-xl">
|
<div className="h-full w-screen max-w-md">
|
||||||
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
|
<div className="h-full flex flex-col text-base bg-accents-1 shadow-xl overflow-y-auto">
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.1 KiB |
Loading…
x
Reference in New Issue
Block a user