This commit is contained in:
Belen Curcio 2020-10-20 12:19:18 -03:00
parent 26a2090b11
commit d171a3113c
8 changed files with 626 additions and 12350 deletions

View File

@ -0,0 +1,17 @@
.root {
@apply relative w-full h-full;
}
.rootPanel {
@apply absolute flex flex-row inset-0 z-20 overflow-hidden;
}
.leftPanel {
@apply flex-1;
cursor: url('/cursor-left.png'), auto;
}
.rightPanel {
@apply flex-1;
cursor: url('/cursor-right.png'), auto;
}

View File

@ -1,7 +1,6 @@
import { FC, useState } from 'react'
import React from 'react'
import React, { FC, useState } from 'react'
import SwipeableViews from 'react-swipeable-views'
import s from './ProductSlider.module.css'
interface Props {
children?: any
}
@ -19,10 +18,10 @@ const ProductSlider: FC<Props> = ({ children }) => {
}
return (
<div className="relative w-full h-full">
<div className="absolute flex flex-row inset-0 z-10 opacity-0">
<div className="flex-1 bg-cyan" onClick={goBack}></div>
<div className="flex-1 bg-pink" onClick={goNext}></div>
<div className={s.root}>
<div className={s.rootPanel}>
<div className={s.leftPanel} onClick={goBack}></div>
<div className={s.rightPanel} onClick={goNext}></div>
</div>
<SwipeableViews index={idx} onChangeIndex={setIdx}>
{children}

View File

@ -1,5 +1,5 @@
import { NextSeo } from 'next-seo'
import { FC, useState } from 'react'
import { FC, useState, useEffect } from 'react'
import type { ProductNode } from '@lib/bigcommerce/api/operations/get-product'
import { useUI } from '@components/ui/context'
import { Button, Container } from '@components/ui'
@ -7,7 +7,7 @@ import { Swatch, ProductSlider } from '@components/product'
import useAddItem from '@lib/bigcommerce/cart/use-add-item'
import { getProductOptions } from '../helpers'
import s from './ProductView.module.css'
import * as Bowser from 'bowser'
interface Props {
className?: string
children?: any
@ -18,6 +18,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
const addItem = useAddItem()
const { openSidebar } = useUI()
const options = getProductOptions(product)
let notValidBrowser = null
const [choices, setChoices] = useState<Record<string, any>>({
size: null,
@ -26,6 +27,16 @@ const ProductView: FC<Props> = ({ product, className }) => {
const [loading, setLoading] = useState(false)
useEffect(() => {
const browser = Bowser.getParser(window.navigator.userAgent)
const notValidBrowser = browser.satisfies({
mobile: {
safari: '>=14',
android: '>81',
},
})
}, [notValidBrowser])
const addToCart = async () => {
setLoading(true)
try {
@ -85,9 +96,13 @@ const ProductView: FC<Props> = ({ product, className }) => {
))}
</ProductSlider>
</div>
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
<img src="/slider-arrows.png" />
</div>
{notValidBrowser && (
<div className="absolute z-10 bottom-10 left-1/2 transform -translate-x-1/2 inline-block">
<img src="/slider-arrows.png" />
</div>
)}
<div className={s.squareBg}></div>
</div>

11839
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -22,18 +22,15 @@
"@headlessui/react": "^0.2.0",
"@tailwindcss/ui": "^0.6.2",
"animate.css": "^4.1.1",
"bowser": "^2.11.0",
"bunyan": "^1.8.14",
"bunyan-prettystream": "^0.1.3",
"classnames": "^2.2.6",
"cookie": "^0.4.1",
"js-cookie": "^2.2.1",
"lodash.debounce": "^4.0.8",
<<<<<<< HEAD
"next": "^9.5.5",
=======
"lodash.random": "^3.2.0",
"next": "^9.5.6-canary.4",
>>>>>>> 0922c87621a6a34986bf811a1f2e55ed0bc7edf4
"next-seo": "^4.11.0",
"next-themes": "^0.0.4",
"nextjs-progressbar": "^0.0.6",

BIN
public/cursor-left.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
public/cursor-right.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

1077
yarn.lock

File diff suppressed because it is too large Load Diff