From cec45b3ab83771757a925c4b5c9e08039b86e318 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 14 Oct 2020 15:17:39 -0300 Subject: [PATCH] Image Slider --- .../product/ProductSlider/ProductSlider.tsx | 34 +++++++ components/product/ProductSlider/index.ts | 1 + .../product/ProductView/ProductView.tsx | 27 ++--- components/product/index.ts | 1 + package.json | 2 + pages/_app.tsx | 8 +- public/slider-arrows.png | Bin 0 -> 1739 bytes yarn.lock | 93 +++++++++++++++++- 8 files changed, 147 insertions(+), 19 deletions(-) create mode 100644 components/product/ProductSlider/ProductSlider.tsx create mode 100644 components/product/ProductSlider/index.ts create mode 100644 public/slider-arrows.png diff --git a/components/product/ProductSlider/ProductSlider.tsx b/components/product/ProductSlider/ProductSlider.tsx new file mode 100644 index 000000000..c255b5038 --- /dev/null +++ b/components/product/ProductSlider/ProductSlider.tsx @@ -0,0 +1,34 @@ +import { FC, useState } from 'react' +import React from 'react' +import SwipeableViews from 'react-swipeable-views' + +interface Props { + children?: any +} + +const ProductSlider: FC = ({ children }) => { + const [idx, setIdx] = useState(0) + const count = React.Children.count(children) + + const goBack = () => { + idx !== 0 ? setIdx(idx - 1) : setIdx(count - 1) + } + + const goNext = () => { + idx + 1 === count ? setIdx(0) : setIdx(idx + 1) + } + + return ( +
+
+
+
+
+ + {children} + +
+ ) +} + +export default ProductSlider diff --git a/components/product/ProductSlider/index.ts b/components/product/ProductSlider/index.ts new file mode 100644 index 000000000..504440410 --- /dev/null +++ b/components/product/ProductSlider/index.ts @@ -0,0 +1 @@ +export { default } from './ProductSlider' diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 30ce05fb2..2eb132355 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -1,13 +1,13 @@ import cn from 'classnames' +import { NextSeo } from 'next-seo' import { FC, useState } from 'react' import s from './ProductView.module.css' -import { Button, Container } from '@components/ui' -import { Swatch } from '@components/product' import { Colors } from '@components/ui/types' -import type { Product } from '@lib/bigcommerce/api/operations/get-product' -import useAddItem from '@lib/bigcommerce/cart/use-add-item' import { useUI } from '@components/ui/context' -import { NextSeo } from 'next-seo' +import { Button, Container } from '@components/ui' +import { Swatch, ProductSlider } from '@components/product' +import useAddItem from '@lib/bigcommerce/cart/use-add-item' +import type { Product } from '@lib/bigcommerce/api/operations/get-product' interface Props { className?: string children?: any @@ -61,7 +61,7 @@ const ProductView: FC = ({ product, className }) => { ], }} /> -
+

{product.name} @@ -72,13 +72,18 @@ const ProductView: FC = ({ product, className }) => { {product.prices?.price.currencyCode}

-
+
- + + {product.images.edges?.map((image) => ( + + ))} +
+
+ +
+
diff --git a/components/product/index.ts b/components/product/index.ts index c9459e858..82ac6c548 100644 --- a/components/product/index.ts +++ b/components/product/index.ts @@ -1,3 +1,4 @@ export { default as Swatch } from './Swatch' export { default as ProductView } from './ProductView' export { default as ProductCard } from './ProductCard' +export { default as ProductSlider } from './ProductSlider' diff --git a/package.json b/package.json index 40ce71e89..b36149081 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,8 @@ "react-dom": "^16.13.1", "react-icons": "^3.11.0", "react-merge-refs": "^1.1.0", + "react-swipeable-views": "^0.13.9", + "react-swipeable-views-utils": "^0.14.0-alpha.0", "react-ticker": "^1.2.2", "swr": "^0.3.3" }, diff --git a/pages/_app.tsx b/pages/_app.tsx index 1de2656de..51f376b77 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -17,12 +17,8 @@ export default function MyApp({ Component, pageProps }: AppProps) { return ( <> - + + diff --git a/public/slider-arrows.png b/public/slider-arrows.png new file mode 100644 index 0000000000000000000000000000000000000000..0740919c974cb8e6c1f9cd87f29a9e4995d6c9a1 GIT binary patch literal 1739 zcmV;+1~mDJP)91?`spsdh>C8sq^mx&va+(XvT|Y=mzS62xw*OO>+5SJm&<)XDdWe>DCLo= zXDF>+ugB{*lqUYBxxT)BCK-nB{N%&{Zf|d^-EQ~qd_MmXAD7YT20GTj{Ub^fziW+l zj6~s5#@~>f3a)=D()jBJt_Q2Ds}0Ej(!@_<0&;qKx?C(4cW}Fl&Nfkw(dffcsnnDy zaC380!DSQQw@WfWOs(B+AE!;Tq?Mnk1w?lo4cx}Z2BiN0jcbSjkPH%`M&5p>)7kS~ zP#p482R{c+`MJNp-+{V(xVpNklL)Z{s@v=9>wOS%dUtpCNjyas_?bw9D8uRt?=d3& zaV4cg?I@!iTfS(Mp!wmbpk!iH?20E~TQFk0Xj9PqKwbXN2Puo%D=4*kiZ=cyju13I z7!_Yoj%?1Qaq;l*u*^2HtzsEL^Mfxuq0u8Lfiloe#1c}<&ygenN?V#buc1gVu1SLC zhx1iplI8$xJM987grNDMHBO_(=Q(v8IOm$O-h<|c7B81-K3d~(p{@5M`w~1qzOCb@ z1^bfZR1h>jsJNZxdG$T8Pf7e!gXSkos&f>oZx7Sh3?cH9AO27%6!<#2k;Nb#)u)5S z#l?xWNYMOf3CiN=(9l-%kd;yBzS%}x2ou*OamIA zN=+a!5i~#iAytb60_8!hMy($*Km92tpU-didc8df1dIn|&~ViHA@kE0kX$ae2@)C- z2-@xTp^Dp#grND+u2yjXNGgMQop>apu1GxK$4LN`<_Ch3XC(ADu?*Gmy1Z=?vJUP= zQ7e<*!WBOXj2W)E5E9K#0r%W|Gu7UVxKJIgp?t=(YvKT$XSwkxLRIVhXyCbZw37pf zLc-6V#S%0>1@6$ogZIS}d=L%=uKCO3D%s{|6y%7)A@+r&&rco?Eu%b&1$ZPJ^78W1 z#6SPTxOz7Ec@K&!3Wl}mM)SidX1UYpoQYxhBpd|hSB{V<_Ky{Q#=*8G8Sn#ZwI_x_ z;pn}gCLSS5-)-;{2joz3X}RBxVwCUMjJ$uux^ZLySKOmY=?WK#d+UtWLtg4inEttvusL-a^dcM0%$c zaiC#Ec(F zE*p<8&a2+&%=i&|DXo)+trXcae%`+9C`}~jlNZDin9M(`{6yOJP%4$S;6Tawe%ytc zQ;*nIwplCz&-!b|kMz}P&DT7kItrWT!-*rz_z}O3|I+a37_hAIGx4E@@Y^3T;@gu$ z`HE%a}YkqM1m{xugJDOdovnoUNc|riXQNgO@S7zM^+ z;3M;e?L9v~*EcpcqU?(E25IFdF##C{6VEcYC~h}N2G6R;Jwxc3wWh^{ETi+GB9KeO z3a)>k4!?thwlEqPG<<04NORjr6F)`-WEjd|qgt(SGY(Ta$y?fj@<`P)l$J8=&QZ6? hJt