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 000000000..0740919c9 Binary files /dev/null and b/public/slider-arrows.png differ diff --git a/yarn.lock b/yarn.lock index d50dd2fa5..7a0f870e3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1009,7 +1009,14 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-transform-typescript" "^7.10.4" -"@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4": +"@babel/runtime@7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c" + integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA== + dependencies: + regenerator-runtime "^0.12.0" + +"@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.6.2", "@babel/runtime@^7.8.4": version "7.11.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736" integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw== @@ -5176,6 +5183,11 @@ jws@^3.2.2: jwa "^1.4.1" safe-buffer "^5.0.1" +keycode@^2.1.7: + version "2.2.0" + resolved "https://registry.yarnpkg.com/keycode/-/keycode-2.2.0.tgz#3d0af56dc7b8b8e5cba8d0a97f107204eec22b04" + integrity sha1-PQr1bce4uOXLqNCpfxByBO7CKwQ= + keyv@^3.0.0: version "3.1.0" resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9" @@ -6608,7 +6620,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@15.7.2, prop-types@^15.6.2: +prop-types@15.7.2, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -6732,6 +6744,15 @@ react-dom@^16.13.1: prop-types "^15.6.2" scheduler "^0.19.1" +react-event-listener@^0.6.0: + version "0.6.6" + resolved "https://registry.yarnpkg.com/react-event-listener/-/react-event-listener-0.6.6.tgz#758f7b991cad9086dd39fd29fad72127e1d8962a" + integrity sha512-+hCNqfy7o9wvO6UgjqFmBzARJS7qrNoda0VqzvOuioEpoEXKutiKuv92dSz6kP7rYLmyHPyYNLesi5t/aH1gfw== + dependencies: + "@babel/runtime" "^7.2.0" + prop-types "^15.6.0" + warning "^4.0.1" + react-icons@^3.11.0: version "3.11.0" resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.11.0.tgz#2ca2903dfab8268ca18ebd8cc2e879921ec3b254" @@ -6754,6 +6775,57 @@ react-refresh@0.8.3: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== +react-swipeable-views-core@^0.13.7: + version "0.13.7" + resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.13.7.tgz#c082b553f26e83fd20fc17f934200eb717023c8a" + integrity sha512-ekn9oDYfBt0oqJSGGwLEhKvn+QaqMGTy//9dURTLf+vp7W5j6GvmKryYdnwJCDITaPFI2hujXV4CH9krhvaE5w== + dependencies: + "@babel/runtime" "7.0.0" + warning "^4.0.1" + +react-swipeable-views-core@^0.14.0-alpha.0: + version "0.14.0-alpha.0" + resolved "https://registry.yarnpkg.com/react-swipeable-views-core/-/react-swipeable-views-core-0.14.0-alpha.0.tgz#1c40dd1c328c97048a8f2cb9de504ee611ae21dd" + integrity sha512-TQm58RJv01EseBfaeY0kZUIBmhs1NyKXwhJL52iN/UlzbQSiaIE2kk+mSGicUriBK0H7UlScgLeJR91AJ7SVcA== + dependencies: + "@babel/runtime" "7.0.0" + warning "^4.0.1" + +react-swipeable-views-utils@^0.13.9: + version "0.13.9" + resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.13.9.tgz#a66e98f2f4502d8b00182901f80d13b2f903e10f" + integrity sha512-QLGxRKrbJCbWz94vkWLzb1Daaa2Y/TZKmsNKQ6WSNrS+chrlfZ3z9tqZ7YUJlW6pRWp3QZdLSY3UE3cN0TXXmw== + dependencies: + "@babel/runtime" "7.0.0" + keycode "^2.1.7" + prop-types "^15.6.0" + react-event-listener "^0.6.0" + react-swipeable-views-core "^0.13.7" + shallow-equal "^1.2.1" + +react-swipeable-views-utils@^0.14.0-alpha.0: + version "0.14.0-alpha.0" + resolved "https://registry.yarnpkg.com/react-swipeable-views-utils/-/react-swipeable-views-utils-0.14.0-alpha.0.tgz#1bc91cf89d13417a0ca8edc11b4a2c55c4a889b9" + integrity sha512-Ya9Xtr4uE1CYxyrPwtcImzcZFcOr3PP51kRgIOTx3Dx9SF31OtF0t2CgXuypTYTs7G4StRE3NzWlvSBiMZSVtQ== + dependencies: + "@babel/runtime" "7.0.0" + keycode "^2.1.7" + prop-types "^15.6.0" + react-event-listener "^0.6.0" + react-swipeable-views-core "^0.14.0-alpha.0" + shallow-equal "^1.2.1" + +react-swipeable-views@^0.13.9: + version "0.13.9" + resolved "https://registry.yarnpkg.com/react-swipeable-views/-/react-swipeable-views-0.13.9.tgz#d6a6c508bf5288ad55509f9c65916db5df0f2cec" + integrity sha512-WXC2FKYvZ9QdJ31v9LjEJEl1bA7E4AcaloTkbW0uU0dYf5uvv4aOpiyxubvOkVl1a5L2UAHmKSif4TmJ9usrSg== + dependencies: + "@babel/runtime" "7.0.0" + prop-types "^15.5.4" + react-swipeable-views-core "^0.13.7" + react-swipeable-views-utils "^0.13.9" + warning "^4.0.1" + react-ticker@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/react-ticker/-/react-ticker-1.2.2.tgz#12cda5ff8266c6fe90ffcd8c58e12ba1596ddf24" @@ -6826,6 +6898,11 @@ regenerate@^1.4.0: resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.1.tgz#cad92ad8e6b591773485fbe05a485caf4f457e6f" integrity sha512-j2+C8+NtXQgEKWk49MMP5P/u2GhnahTtVkRIHr5R5lVRlbKvmQ+oS+A5aLKWp2ma5VkT8sh6v+v4hbH0YHR66A== +regenerator-runtime@^0.12.0: + version "0.12.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" + integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg== + regenerator-runtime@^0.13.4: version "0.13.7" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz#cac2dacc8a1ea675feaabaeb8ae833898ae46f55" @@ -7211,6 +7288,11 @@ sha.js@^2.4.0, sha.js@^2.4.8: inherits "^2.0.1" safe-buffer "^5.0.1" +shallow-equal@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da" + integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA== + shell-quote@1.7.2: version "1.7.2" resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.7.2.tgz#67a7d02c76c9da24f99d20808fcaded0e0e04be2" @@ -7951,6 +8033,13 @@ vue-template-compiler@^2.6.12: de-indent "^1.0.2" he "^1.1.0" +warning@^4.0.1: + version "4.0.3" + resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" + integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== + dependencies: + loose-envify "^1.0.0" + watchpack@2.0.0-beta.13: version "2.0.0-beta.13" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.0.0-beta.13.tgz#9d9b0c094b8402139333e04eb6194643c8384f55"